Home > Article > Web Front-end > How to use select assignment ng-options configuration method in angularjs?
Below I will share with you an angularjs select assignment ng-options configuration method, which has a good reference value and I hope it will be helpful to everyone.
Array mode
The data is an array
$scope.years = [2014, 2015, 2016];
Page elements
<select ng-model="item" ng-options="item as y for y in years"> </select>
Set the default value
If you need to set the default option, you can set a parameter first:
$scope.item = 2016; $scope.years = [2014, 2015, 2016];
Object array mode
Data is an array of objects
$scope.sites = [ {site : "baidu", url : "https://www.baidu.com"}, {site : "163", url : "http://www.163.com"}, {site : "sina", url : "http://www.sina.com"} ];
Page elements
<select ng-model="s.site" ng-options="s.site as s.site group by site.group for s in sites"> </select>
Set the default value
If you need to set the default option, you can set a parameter first:
$scope.site = "163"; $scope.sites = [ {site : "baidu", url : "https://www.baidu.com"}, {site : "163", url : "http://www.163.com"}, {site : "sina", url : "http://www.sina.com"} ];
Key-Vules object array method
The data is an object array
$scope.cars = { car1 : {brand : "BYD", model : "Y50", color : "red"}, car2 : {brand : "CC", model : "HF", color : "white"}, car3 : {brand : "JL", model : "JL10D", color : "black"} };
Page elements
<select ng-model="myCar" ng-options="y.brand for (x, y) in cars"> </select>
Set the default value
If you need to set For the default option, you can set a parameter first:
$scope.site = "BYD"; $scope.cars = { car1 : {brand : "BYD", model : "Y50", color : "red"}, car2 : {brand : "CC", model : "HF", color : "white"}, car3 : {brand : "JL", model : "JL10D", color : "black"} };
##angularjs ng-options official API
Array type:
label for value in array select as label for value in array label group by group for value in array select as label group by group for value in array track by trackexpr
Object type:
label for (key , value) in object select as label for (key , value) in object label group by group for (key, value) in object select as label group by group for (key, value) in obThe above is what I compiled for everyone. I hope it will be helpful to everyone in the future. Related articles:
NodeJS parent process and child process resource sharing principles and implementation methods
vue axios form submission upload Examples of pictures
Sample code for uploading pictures and files in vue
##
The above is the detailed content of How to use select assignment ng-options configuration method in angularjs?. For more information, please follow other related articles on the PHP Chinese website!