AngularJS Directives

AngularJS Filters and Elements

AngularJS Tutorials

AngularJS Select Boxes

Select Boxes



AngularJS allows us to create a drop-down list. We can insert options in it by using the ng-options directive. We can also use ng-repeat for inserting items in the select box but ng-options is specifically designed for this purpose.


ng-repeat Directive:-


The ng-repeat directive is used to repeat a set of HTML a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. If the collection is in the form of objects, then ng-repeat is best for making an HTML table.




< element ng-repeat="expression" >< /element >


Further Explanation:-


Value Description

An expression that specifies how to loop the collection.
Legal Expression examples:

  1. in records
  2. (key, value) in myObj
  3. in records track by $id(y)


ng-options Directive:-


The ng-options directive is used to fill a select element with options. The ng-options directive uses an array to fill the dropdown list. It is better than ng-repeat as it is more flexible.




< select ng-options="array expression" >< /select >


Further Explanation:-


Value Description
expression Legal expressions:
  1. label for value in array
  2. select as label for value in array
  3. label group by group for value in array
  4. label disable when disable for value in array
  5. label group by group for value in array track by expression
  6. label disable when disable for value in array track by expression
  7. label for value in array | orderBy expression track by expression

Code Explanation

All Tutorials related to AngularJS Tutorials

All Sections related to AngularJS