ng-options

What is ng-options:ng-options used to bind options in a select element.
Description of ng-options:Although by using ng-repeat to iterate a list to bind options with select element. but ng-options directive is more efficient and exact method to bind options along with other operations too.With this selected value will we in (key,value) or value .
This directive has priority 0.
Syntax of ng-options:
<select ng-model="selectedValue" ng-options="obj.Key as obj.Value for obj in List"></select>
Or

<select ng-model="selectedValue" ng-options="obj.Value for obj in List"></select>
How to Use ng-options/ng-options Example::
Example 1:
<div ng-app="webapp">
    <div ng-controller="angularjsexampleCtlr">
        <div>
            Angularjs Example of ng-options
            <select ng-model="selectedValue" ng-options="obj.Id as obj.Name for obj in List"></select>
        </div>
    </div>
</div>
o/p:     selectedValue= Name

Example 2:
<div ng-app="webapp">
    <div ng-controller="angularjsexampleCtlr">
        <div>
            Angularjs Example of ng-options
            <select ng-model="selectedObj" ng-options="obj.Name for obj in List track by obj.Id "></select>
        </div>
    </div>
</div>
o/p:     selectedObj= (Id,Name) can say whole obj
<script>
    angular.module('webapp', []).controller('angularjsexampleCtlr', function ($scope, $http) {
        $scope.List = [
            { Id: 1, Name: 'INDIA' },
            { Id: 2, Name: 'USA' },
            { Id: 3, Name: 'CHINA' },
            { Id: 4, Name: 'RUSSIA' },
        ]
        $scope.selectedValue = $scope.List[0].Id;
        $scope.selectedObj = $ scope.List[0];
    });

</script>
O/P:
Angularjs Example of ng-options:

o/p: selectedValue={{selectedValue}}
Angularjs Example of ng-options

o/p: selectedObj={{selectedObj}}

No comments :

Post a Comment