AngularJS Select

In the last article, we studied how to create tables via ng-repeat directive. In this article we shall study how to create drop down elements in a web page via AngularJS select. You can use “ng-options” as well as “ng-repeat” directive to create Select element. In this article we shall explain both approaches.

AngularJS Select via “ng-options”

To create drop down list via AngularJS select statement, simply add “ng-options” directive to the opening select tag. The value for the “ng-options” directive is the expression that iterates over items in an array or object. Take a look at the following example to see how to create select drop down list via “ng-options”.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>

     <div ng-app = "SelectApp" ng-controller = "SelectController" ng-init="">
         
       <select ng-model="selectedStName" ng-options="student.name for student in Students">
        </select>
        
      </div>
      
      <script>
         var mainApp = angular.module("SelectApp", []);
         
         mainApp.controller('SelectController', function($scope) {
            $scope.Students = [
                              {name:'John',age:20},
                              {name:'Alice',age:21},
                              {name:'Mark',age:25},
                              {name:'Carry',age:19},
                              {name:'Bron',age:12}
                             ]
             
         });
      </script>  

</body>
</html>

Download the code Try the code

Take a careful look at the above code. First go to the script section where we create a “TableController”. This controller contains a “Students” array which contains five objects. Each object has two members name and age. All the variables have been initialized with some values.

Now come back to the top and take a look at the view for the “SelectController”. It contains a Select element. The opening “Select” element contains “ng-options” directive. Inside this directive we iterate upon each object in the Students array and store it in a temporary “student” variable. In each iteration “name” variable of the currently iterating student object is printed inside new “option” element which generated at run time. Since there are five items in the “Students” array, you shall see five items in the drop down list.

AngularJS Select via “ng-repeat”

Like tables, you can also create drop down list via “ng-repeat” directive. To do so, you have to write “ng-repeat” directive inside the opening option element in the Select tag. Take a look at the following example to see how we can bind student names to a drop down list via “ng-repeat”.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>

     <div ng-app = "SelectApp" ng-controller = "SelectController" ng-init="">
         
       <select ng-model="selectedStName">
           <option ng-repeat="student in Students">{{student.name}}</option>
        </select>
        
      </div>
      
      <script>
         var mainApp = angular.module("SelectApp", []);
         
         mainApp.controller('SelectController', function($scope) {
            $scope.Students = [
                              {name:'John',age:20},
                              {name:'Alice',age:21},
                              {name:'Mark',age:25},
                              {name:'Carry',age:19},
                              {name:'Bron',age:12}
                             ]
             
         });
      </script>  

</body>
</html>

Download the code Try the code

<<< AngularJS TablesAngularJS DOM >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .