In general the dropdownlist in HTML is formed based on the select tag and it's items with the option tag.Angular JS provided us the special directive to deal with the option tag named 'ng-option'.
ng-option in angular JS is used to build option tag dynamically based on the collection of items that which render as items in dropdownlist.ng-options directive can hold of types array or object.
Sample Look :
<select ng-options="x for x in departments"></select>
By making ng-options as like above, we'll face an exception as "Controller 'ngModel', required by directive 'ngOptions', can't be found!" as like below image.
Clearly, to correct the above error we have to make sure the use of ng-model to work over the ng-options. Then the correct statement will looks as like below :
<select ng-model="ourdept" ng-options="x for x in departments"></select>
So, In the above I had corrected by providing the ng-model directive.By placing the ng-model over the select tag, the thing whenever we do selection the ng-model grabs or holds that value.
ng-option with an array :
<script type="text/javascript">
var myapp = angular.module('myapp', []);
myapp.controller('ctrlr', ['$scope', function ($scope) {
$scope.departments = ['Architect', 'Sales', 'Developer', 'Tester'];
}]);
</script>
In the above script, I had attached an array variable named 'departments' with items to $scope object.
<body ng-app="myapp" ng-controller="ctrlr">
<select ng-model="ourdept" ng-options="x for x in departments"></select>
</body>
In the above view code, I used the ng-options with an expression as "x for x in departments".
Whenever the loop starts, the value will be handed to variable 'x' from the 'departments' and we can use the variable 'x' in a way as we want.
Result of above code :
If we observe at the above result screenshot, we can find an extra empty item. The empty item will bind along with the collection this is to say that our model(ng-model) is not being selected untill that time.
If once I had done with the selection from the dropdown, we cant find empty data in the list any more & it will as like below screenshot.
Fixed Label with 'select' indication :
While working on dropdownlist we usually looks for having the select label indication over the dropdownlist like "---Please select---".The following code achieves that scenario.
<select ng-model="ourdept" ng-options="x for x in departments">
<option value="">--select--</option>
</select>
Result of above code :
Another Example over JSON result :
<script type="text/javascript">
var myapp = angular.module('myapp', []);
myapp.controller('ctrlr', ['$scope', function ($scope) {
$scope.departments = [
{ "deptid": 1, "deptname": "Architect" },
{ "deptid": 2, "deptname": "Developer" },
{ "deptid": 3, "deptname": "Tester" },
{ "deptid": 4, "deptname": "Sales" }
];
}]);
</script>
If you look over the above script, I had provided the static JSON data to the variable 'departments' with properties as 'deptid' and 'deptname'.
View Code :
<body ng-app="myapp" ng-controller="ctrlr">
<select ng-model="ourdept" ng-options="x for x in departments">
<option value="">--select--</option>
</select>
</body>
In the above view code, I had provided the same expression as like "x for x in departments" this is what we gave for an array in above example this results like below :
As 'x' is an object here we have to use any of the property that what we needs to display as items in the dropdownlist. To display department names in the dropdownlist my expression should be as like "ng-options="x.deptname for x in departments" So my code looks as like below after correcting it to get the department names :
<body ng-app="myapp" ng-controller="ctrlr">
<select ng-model="ourdept" ng-options="x.deptname for x in departments">
<option value="">--select--</option>
</select>
</body>
Now, result will be as follows :
Setting value attribute to dropdownlist :
If we observe in the above codes section we didnt provided any kind of "value" attribute to our dropdownlist, But while working around dropdownlist we expect to have the value attribute to the list options. By default if we do inspect element to the above code we will get the following result.
Those are the values which we got by default from the JSON object.
To make sure if we required to get the ID values for the value attribute we have to give the track by values like below :
For the above same script modified view with track by:
<body ng-app="myapp" ng-controller="ctrlr">
<select ng-model="ourdept" ng-options="x.deptname for x in departments track by x.deptid">
<option value="">--select--</option>
</select>
</body>
Now, the result with inspect element will be as follows :
In the above screenshot we can find our deptid values as value attibute to the option tag.
So, finally I can say we can have the "value" attribute with our json value data by using the track by option, else it will generate default json object indexed values.
ng-option in angular JS is used to build option tag dynamically based on the collection of items that which render as items in dropdownlist.ng-options directive can hold of types array or object.
Sample Look :
<select ng-options="x for x in departments"></select>
By making ng-options as like above, we'll face an exception as "Controller 'ngModel', required by directive 'ngOptions', can't be found!" as like below image.
Clearly, to correct the above error we have to make sure the use of ng-model to work over the ng-options. Then the correct statement will looks as like below :
<select ng-model="ourdept" ng-options="x for x in departments"></select>
So, In the above I had corrected by providing the ng-model directive.By placing the ng-model over the select tag, the thing whenever we do selection the ng-model grabs or holds that value.
ng-option with an array :
<script type="text/javascript">
var myapp = angular.module('myapp', []);
myapp.controller('ctrlr', ['$scope', function ($scope) {
$scope.departments = ['Architect', 'Sales', 'Developer', 'Tester'];
}]);
</script>
In the above script, I had attached an array variable named 'departments' with items to $scope object.
<body ng-app="myapp" ng-controller="ctrlr">
<select ng-model="ourdept" ng-options="x for x in departments"></select>
</body>
In the above view code, I used the ng-options with an expression as "x for x in departments".
Whenever the loop starts, the value will be handed to variable 'x' from the 'departments' and we can use the variable 'x' in a way as we want.
Result of above code :
If we observe at the above result screenshot, we can find an extra empty item. The empty item will bind along with the collection this is to say that our model(ng-model) is not being selected untill that time.
If once I had done with the selection from the dropdown, we cant find empty data in the list any more & it will as like below screenshot.
Fixed Label with 'select' indication :
While working on dropdownlist we usually looks for having the select label indication over the dropdownlist like "---Please select---".The following code achieves that scenario.
<select ng-model="ourdept" ng-options="x for x in departments">
<option value="">--select--</option>
</select>
Result of above code :
Another Example over JSON result :
<script type="text/javascript">
var myapp = angular.module('myapp', []);
myapp.controller('ctrlr', ['$scope', function ($scope) {
$scope.departments = [
{ "deptid": 1, "deptname": "Architect" },
{ "deptid": 2, "deptname": "Developer" },
{ "deptid": 3, "deptname": "Tester" },
{ "deptid": 4, "deptname": "Sales" }
];
}]);
</script>
If you look over the above script, I had provided the static JSON data to the variable 'departments' with properties as 'deptid' and 'deptname'.
View Code :
<body ng-app="myapp" ng-controller="ctrlr">
<select ng-model="ourdept" ng-options="x for x in departments">
<option value="">--select--</option>
</select>
</body>
In the above view code, I had provided the same expression as like "x for x in departments" this is what we gave for an array in above example this results like below :
As 'x' is an object here we have to use any of the property that what we needs to display as items in the dropdownlist. To display department names in the dropdownlist my expression should be as like "ng-options="x.deptname for x in departments" So my code looks as like below after correcting it to get the department names :
<body ng-app="myapp" ng-controller="ctrlr">
<select ng-model="ourdept" ng-options="x.deptname for x in departments">
<option value="">--select--</option>
</select>
</body>
Now, result will be as follows :
Setting value attribute to dropdownlist :
If we observe in the above codes section we didnt provided any kind of "value" attribute to our dropdownlist, But while working around dropdownlist we expect to have the value attribute to the list options. By default if we do inspect element to the above code we will get the following result.
Those are the values which we got by default from the JSON object.
To make sure if we required to get the ID values for the value attribute we have to give the track by values like below :
For the above same script modified view with track by:
<body ng-app="myapp" ng-controller="ctrlr">
<select ng-model="ourdept" ng-options="x.deptname for x in departments track by x.deptid">
<option value="">--select--</option>
</select>
</body>
Now, the result with inspect element will be as follows :
In the above screenshot we can find our deptid values as value attibute to the option tag.
So, finally I can say we can have the "value" attribute with our json value data by using the track by option, else it will generate default json object indexed values.
No comments:
Post a Comment