1. Select related knowledge
<select> <option value="0">HTML</option> <option value="1">Java</option> <option value="2">Python</option> </select>
Where value is the value stored in the database, which is the values such as 0, 1, and 2 here, label is the value displayed on the page, which is the characters such as Html and Java here.
2. ng-options
1.Arrays as data source
- label for value in array
- select as label for value in array
- label group by group for value in array
Code 1 (Array is a string)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//1.4.6/"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<!--
HerelabelandvalueNeed to be consistent，Otherwise, an error will be reported
Expression syntax：label for value in array
-->
<select ng-model="name" ng-options="name for name in names"></select>
</div>
<script>
var app = ('myApp', []);
('myCtrl', function($scope) {
$ = ['baidu', 'Google', 'apple'];
});
</script>
</body>
</html>
The final result is:
<select ng-model="name" ng-options="name for name in names" class="ng-pristine ng-valid ng-touched"> <option value="?" selected="selected"></option> <option value="string:baidu" label="baidu">baidu</option> <option value="string:Google" label="Google">Google</option> <option value="string:apple" label="apple">apple</option> </select>
It should be noted that the value of option in the last generated html code is String:baidu, and its type identifier will be added before the original string in the array. This is learned through Baidu because of the angularjs version problem, and the specific test has not been tested.
Code 2 (Array is an object)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//1.4.6/"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<!--
Expression syntax：label for value in array
-->
<select ng-model="name" ng-options=" for c in coms"></select>
</div>
<script>
var app = ('myApp', []);
('myCtrl', function($scope) {
$ = [
{'id':'baidu','name':'Baidu'},
{'id':'Google', 'name':'Google'},
{'id':'apple', 'name':'apple'}];
});
</script>
</body>
</html>
The final html code is:
<!-- Notice：Hereng-modelBindednameThe variable is not a selected itemnameproperty，而是选中itemof全部property
If the index is selected0item，butname={"id":"baidu","name":"Baidu"}
Hereng-modelThe binding variable is the valueselectofvaluevalue
-->
<select ng-model="name" ng-options=" for c in coms" class="ng-pristine ng-valid ng-touched">
<option value="?" selected="selected"></option>
<option value="object:3" label="baidu">baidu</option>
<option value="object:4" label="Google">Google</option>
<option value="object:5" label="apple">apple</option>
</select>
Through the generated html code, we can see that writing this way will cause the value of the final option to be displayed as the data type, and the actual result we want to get is to display the value we selected, so we need to write it as:
<!-- Expression syntax:select as label for value in array Asselectofvalue，Asselectoflabel --> ng-options=" as for c in coms"
Among them, corresponding to value and corresponding to label. The html code generated is:
<select ng-model="name" ng-options=" as for c in coms" class="ng-pristine ng-valid ng-touched"> <option value="?" selected="selected"></option> <option value="string:baidu" label="Baidu">Baidu</option> <option value="string:Google" label="Google">Google</option> <option value="string:apple" label="apple">apple</option> </select>
Code 3 (categorized by object attributes)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//1.4.6/"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<!--
Expression syntax：label group by group for value in array
-->
<select ng-options=" group by for c in coms" ng-model="name" ></select>
</div>
<script>
var app = ('myApp', []);
('myCtrl', function($scope) {
$ = [{'id':'baidu','name':'Baidu','type':'search'},
{'id':'Google', 'name':'Google','type':'search'},
{'id':'apple', 'name':'apple','type':'cell phone'},
{'id':'TaoBao', 'name':'Taobao','type':'Shopping'}
];
});
</script>
</body>
</html>
The obtained html code is:
<select ng-options=" group by for c in coms" ng-model="name" class="ng-pristine ng-valid ng-touched"> <optgroup label="search"> <option value="object:3" label="Baidu" selected="selected">Baidu</option> <option value="object:4" label="Google">Google</option></optgroup> <optgroup label="cell phone"> <option value="object:5" label="apple">apple</option> </optgroup> <optgroup label="Shopping"> <option value="object:6" label="Taobao">Taobao</option> </optgroup> </select>
Notes (the default selected question)
Through the HTML code finally obtained above, we can find that each generated code will select a blank option by default. If you need to manually specify a default selected value, how should you set it?
We have two ways (the code here is incomplete, please add the html part to the complete html when verifying):
<!-- With code2middle(label for value in array)and(select as label for value in array) As an example-->
<!--
Method one:ng-initproperty
Two syntax forms are usedng-initThere are certain differences at times，其middle第二middle写为了name=coms[0].idIt's becauseng-optionsmiddle通过 select as For the currentselectDesignatedcoms[0].idAsvalueValue of；In writing, an unspecifiedvaluevalue，Then default iscomsmiddle an object of。
-->
<select ng-init="name1=coms[0]" ng-options=" for c in coms" ng-model="name1"></select>
<select ng-init="name2=coms[0].id" ng-options=" as for c in coms" ng-model="name2"></select>
<!--
Method 2： existjs代码middle为ng-model绑定的变量赋value
-->
<script>
var app = ('myApp', []);
('myCtrl', function($scope) {
$ = [{'id':'baidu','name':'Baidu','type':'search'},
{'id':'Google', 'name':'Google','type':'search'},
{'id':'apple', 'name':'apple','type':'cell phone'},
{'id':'TaoBao', 'name':'Taobao','type':'Shopping'}
];
// label for value in array
$scope.name1 = $[0];
// select as label for value in array
$scope.name2 = $[0].id;
});
</script>
2. Objects as data source
- label for (key, value) in object
Code display
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//1.4.6/"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{name4}}
<!--
Expression syntax：select as label for (key, value) in object
-->
<select ng-options="value as key for (key, value) in province" ng-model='name4'></select>
</div>
<script>
var app = ('myApp', []);
('myCtrl', function($scope) {
$ = {
'Beijing':'Beijing',
'Shanxi':'Jin',
'Shanghai':'Shanghai',
};
});
</script>
</body>
</html>
3. All syntax
for array data sources:
- label for value in array
- select as label for value in array
- label group by group for value in array
- label disable when disable for value in array
- label group by group for value in array track by trackexpr
- label disable when disable for value in array track by trackexpr
- label for value in array | orderBy:orderexpr track by trackexpr(for including a filter with track by)
for object data sources:
- label for (key , value) in object
- select as label for (key ,value) in object
- label group by group for (key,value) in object
- label disable when disable for (key, value) in object
- select as label group by group for(key, value) in object
- select as label disable when disable for (key, value) in object
3. ng-repeat
Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//1.4.6/"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select>
<option value="" selected="selected">====Please select====</option>
<option ng-repeat="com in coms" value="{{}}">{{}}</option>
</select>
</div>
<script>
var app = ('myApp', []);
('myCtrl', function($scope) {
$ = [{'id':'baidu','name':'Baidu','type':'search'},
{'id':'Google', 'name':'Google','type':'search'},
{'id':'apple', 'name':'apple','type':'cell phone'},
{'id':'TaoBao', 'name':'Taobao','type':'Shopping'}
];
});
</script>
</body>
</html>
4. Summary
Using ng-repeat to generate select dynamically is slightly simpler than ng-option, but ng-repeat has certain limitations. The selected value can only be a string, while the selected value using ng-option can be an object.
OK, the above is the entire content of this article. I hope that the content of this article has certain reference value for everyone's study or work. Thank you for your support.