IT training-insitute-in-gurgaon | Angular JS Select Box

The select directive is used together with ngModel to provide data-binding between the scope and the select control (including setting default values).

It also handles dynamic option elements, which can be added using the ngRepeat or ngOptions directives.

Lets see an Example:

       <div ng-app="myApp" ng-controller="myCtrl">
       <select ng-model="selectedCar">
       <option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
       </select>
       <h1>You selected: {{selectedCar}}</h1>
       </div>
       <script>
       var app = angular.module('myApp', []);
       app.controller('myCtrl', function($scope) {
        $scope.cars = [
        {model : "Ford Mustang", color : "red"},
        {model : "Fiat 500", color : "white"},
        {model : "Volvo XC90", color : "black"}
        ];
        });
        </script>

Why we use AngularJS Select Boxes?

1)If you want to create a dropdown list, based on an object or an array in AngularJS, you should use the ng-options or ng-repeat directive.

2)Although, both can be used for dropdown list, but ng-repeat directive repeats a block of HTML code for each item in an array.

3)It can be used to create options in a dropdown list, while the ng-options directive was made especially for filling a dropdown list with options, and has at least one important advantage.

4)In AngularJS, you can create a dropdown list (select box) based on items in an array, or an object.

5)Dropdowns made with ng-options allows the selected value to be an object, while dropdowns made from ng-repeat has to be a string.

6)Note:The ng-repeat directive has its limitations, the selected value must be a string.

Creating a Select Box Using ng-options,Lets see an Example:

      <div ng-app="myApp" ng-controller="myCtrl">
      <select ng-model="selectedName" 
      ng-options="x for x in names">
	  </select>
	  </div>
      <script>


     var app = angular.module('myApp', []);
	 app.controller('myCtrl', 
     function($scope) {
	   $scope.names = ["Emil", "Tobias", 
     "Linus"];
	 });
     </script>

Creating a Select Box Using ng-repeat,Lets see an Example:

      <select>
     <option ng-repeat="x in names">{{x}}</option>
   </select>