AngularJS — Select

Basic Select

<select ng-model="selectedColor">
  <option value="">Select Color</option>
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
</select>
<p>Selected: {{selectedColor}}</p>

Select with ng-options

<select ng-model="selectedCountry" ng-options="country.code as country.name for country in countries">
  <option value="">Select Country</option>
</select>

Select with Objects

<select ng-model="selectedUser" ng-options="user as user.name for user in users">
  <option value="">Select User</option>
</select>
<p>Selected: {{selectedUser.name}}</p>

Select with Grouping

<select ng-model="selectedItem" ng-options="item.name group by item.category for item in items">
  <option value="">Select Item</option>
</select>

Multiple Select

<select ng-model="selectedColors" multiple>
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
</select>
<p>Selected: {{selectedColors}}</p>

Mini Practice

1. Create a basic select
2. Use ng-options
3. Group options
4. Implement multiple select

Up Next

Continue with Services — AngularJS services.