angularjsHow do I use the ng-options directive in AngularJS?

The ng-options directive in AngularJS is used to dynamically generate a list of <option> elements for the <select> element. It provides data-binding, which means that the list of options is generated from a JavaScript array and can be changed at runtime.

Example code

<select ng-model="selectedName" ng-options="x for x in names">
  <option value="">-- Select a name --</option>
</select>

In the example above, the ng-model directive sets the selectedName variable to the selected option from the list. The ng-options directive is used to generate the list of options from the names array. The x for x in names expression is used to iterate through the names array and generate the list of options.

Code explanation

1. <select> element: This is the HTML element used to display the list of options.
2. ng-model directive: This directive is used to bind the selected option to the selectedName variable.
3. ng-options directive: This directive is used to generate the list of options from the names array.
4. x for x in names expression: This expression is used to iterate through the names array and generate the list of options.

Helpful links

• AngularJS ng-options Directive
• AngularJS Select Boxes

Edit this code on GitHub