selected angular select

Selected Angular Select

Angular Select is a built-in directive in AngularJS that provides an easy way to create a dropdown list. It is used to bind the value of an HTML dropdown list to a model property in AngularJS. By using the ng-options attribute of the select tag, we can define the options of the dropdown list and bind them to a model property.

Creating a Dropdown List with Angular Select

To create a dropdown list with Angular Select, we need to use the select tag and the ng-model and ng-options attributes. The ng-model attribute is used to bind the selected option to a model property, and the ng-options attribute is used to define the options of the dropdown list.

<select ng-model="selectedOption" ng-options="option.name for option in options">
    <option value="">Select an option</option>
</select>

In the above example, we define a dropdown list with the select tag and bind it to the selectedOption model property using the ng-model attribute. We also define the options of the dropdown list using the ng-options attribute. The options are defined as an array of objects with a name property.

Selecting a Default Option

To select a default option in the dropdown list, we can use the ng-init attribute to set the initial value of the selectedOption model property.

<select ng-model="selectedOption" ng-options="option.name for option in options" ng-init="selectedOption = options[0]">
    <option value="">Select an option</option>
</select>

In the above example, we set the initial value of the selectedOption model property to the first option in the options array using the ng-init attribute.

Multiple Ways to Define Options

There are multiple ways to define the options of the dropdown list using Angular Select:

• Array of Strings: We can define the options as an array of strings.
• Array of Objects: We can define the options as an array of objects with a value and label property.
• Object: We can define the options as an object with key-value pairs where the key is the value of the option and the value is the label.

Array of Strings

<select ng-model="selectedOption" ng-options="option for option in ['Option 1', 'Option 2', 'Option 3']">
    <option value="">Select an option</option>
</select>

In the above example, we define the options as an array of strings and bind them to the dropdown list using the ng-options attribute.

Array of Objects

<select ng-model="selectedOption" ng-options="option.value as option.label for option in [{value: 1, label: 'Option 1'}, {value: 2, label: 'Option 2'}, {value: 3, label: 'Option 3'}]">
    <option value="">Select an option</option>
</select>

In the above example, we define the options as an array of objects with a value and label property and bind them to the dropdown list using the ng-options attribute.

Object

<select ng-model="selectedOption" ng-options="key as value for (key, value) in {'1': 'Option 1', '2': 'Option 2', '3': 'Option 3'}">
    <option value="">Select an option</option>
</select>

In the above example, we define the options as an object with key-value pairs where the key is the value of the option and the value is the label, and bind them to the dropdown list using the ng-options attribute.

Styling the Dropdown List

We can style the dropdown list using CSS. By default, Angular Select creates a select tag with a class of ng-valid, ng-invalid, or ng-pristine based on the state of the form field. We can use these classes to style the dropdown list.

select.ng-valid {
    border-color: green;
}
select.ng-invalid {
    border-color: red;
}
select.ng-pristine {
    background-color: lightgray;
}

In the above example, we style the dropdown list based on its state using CSS.