I will describe the usage by creating a sample.
This example uses the ng-repeat and two way binding to create a HTML dropdown.
HTML Code:
- <!DOCTYPE html>
- <html ng-app>
- <head>
- <title>Simple app</title>
- src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
- </script>
- <script>
- function MyCtrl($scope) {
- $scope.values = [
- {'Dropdonw': 'D1'},
- ];
- $scope.colorcode = [
- {'hashCode': 'R', 'description': 'Red'},
- {'hashCode': 'G', 'description': 'Green'},
- {'hashCode': 'Y', 'description': 'Yellow'},
- {'hashCode': 'P', 'description': 'Pink'}
- ];
- }
- </script>
- </head>
- <body >
- <div ng-controller="MyCtrl" style="border:solid 1px red; top:200px;left:350px;height:600px;width:400px;">
- <div ng-repeat="val in values">
- Select the option
-
- <select
- ng-model="val.option"
- ng-options="code.hashCode as code.description for code in colorcode"></select>
- <tt>Option selected: {{val.option}}</tt>
- </div>
- </div>
- </body>undefined
-
- </html>
- Created one div and specified the controller:
- <div ng-controller="MyCtrl"></div>
- Now I am using ng-repeat attribute to create the how many dropdown to be created. In this example using the $scope.values array.
- Adding option to the Dropdown:
The ngOptions attribute can be used to dynamically generate a list of <option> elements for the <select>element using an array.
ng-options="code.hashCode as code.description for code in colorcode": It will loop through all the items in colorcode and create the options.
Output:
![Output]()