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 ob

The 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!