How to use select assignment ng-options configuration method in angularjs?-JS Tutorial-php.cn

How to use select assignment ng-options configuration method in angularjs?

亚连

Release： 2018-06-02 17:31:54

Original

2402 people have browsed it

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];

Copy after login

Page elements

 <select ng-model="item" ng-options="item as y for y in years">
 </select>

Copy after login

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];

Copy after login

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"}
];

Copy after login

Page elements

 <select ng-model="s.site" ng-options="s.site as s.site group by site.group for s in sites">
 </select>

Copy after login

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"}
];

Copy after login

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"}
};

Copy after login

Page elements

<select ng-model="myCar" ng-options="y.brand for (x, y) in cars">
</select>

Copy after login

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"}
};

Copy after login

##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

Copy after login

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

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

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!