Home  >  Article  >  Web Front-end  >  How to use select assignment ng-options configuration method in angularjs?

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

亚连
亚连Original
2018-06-02 17:31:542373browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn