Home>
1. Basic pull-down effect (lable for value in array)
The ng-model attribute in the select tag must have,Its value is the selected object or property value.
<div ng-controller="ngselect">
<p>usage:label for value in array</p>
<p>option, {{selected}}</p>
<select ng-model="selected" ng-options="o.id for o in optdata">
<option value="">-Please select-</option>
</select>
</div>
m1.controller ("ngselect", ["$scope", function ($sc) {
$sc.selected="";
$sc.optdata=[{
id:10001, maincategory:"Male", productname:"washed t-shirt", productcolor:"White"
}, {
id:10002, maincategory:"Female", productname:"Crew Neck Short Sleeve", productcolor:"Yellow"
}, {
id:10003, maincategory:"Female", productname:"Crew Neck Short Sleeve", productcolor:"Yellow"
}];
}]);
2.Custom drop-down display name (label for value in array)
label can be spliced into different strings as needed
<div ng-controller="ngselect2">
<p>usage:label for value in array (label can be spliced into different strings according to requirements)</p>
<p>option, {{selected}}</p>
<select ng-model="selected" ng-options="(o.productcolor +"-"+ o.productname) for o in optdata">
<option value="">-Please select-</option>
</select>
</div>
m1.controller ("ngselect2", ["$scope", function ($sc) {
$sc.selected="";
$sc.optdata=[{
id:10001, maincategory:"Male", productname:"washed t-shirt", productcolor:"White"
}, {
id:10002, maincategory:"Female", productname:"Crew Neck Short Sleeve", productcolor:"Yellow"
}, {
id:10003, maincategory:"Female", productname:"Crew Neck Short Sleeve", productcolor:"Yellow"
}];
}]);
3.ng-options option grouping
group by
<div ng-controller="ngselect3">
<p>usage:label group by groupname for value in array</p>
<p>option, {{selected}}</p>
<select ng-model="selected" ng-options="(o.productcolor +"-"+ o.productname) group by o.maincategory for o in optdata">
<option value="">-Please select-</option>
</select>
</div>
m1.controller ("ngselect3", ["$scope", function ($sc) {
$sc.selected="";
$sc.optdata=[{
id:10001, maincategory:"Male", productname:"washed t-shirt", productcolor:"White"
}, {
id:10002, maincategory:"Female", productname:"Crew Neck Long Sleeve", productcolor:"Yellow"
}, {
id:10003, maincategory:"Female", productname:"Crew Neck Short Sleeve", productcolor:"Yellow"
}];
}]);
4.ng-options Custom ngmodel binding
The selected value below is the id effect of optdata
<div ng-controller="ngselect4">
<p>usage:select as label for value in array</p>
<p>option, {{selected}}</p>
<select ng-model="selected" ng-options="o.id as o.productname for o in optdata">
<option value="">-Please select-</option>
</select>
</div>
m1.controller ("ngselect4", ["$scope", function ($sc) {
$sc.selected="";
$sc.optdata=[{
id:10001, maincategory:"Male", productname:"washed t-shirt", productcolor:"White"
}, {
id:10002, maincategory:"Female", productname:"Crew Neck Long Sleeve", productcolor:"Yellow"
}, {
id:10003, maincategory:"Female", productname:"Crew Neck Short Sleeve", productcolor:"Yellow"
}];
}]);
effect:
That's all for this article.Hope everyone likes it.
Related articles
- angularjs select assignment ng-options configuration method
- AngularJS basic ng-model-options directive simple example
- How to set the default value of ng-options drop-down data in Angular
- Data binding method of ng-options in AngularJS to implement drop-down list
- How to use ng-options in angular instruction notes
- AngularJS ng-model instance code for dynamically binding ng-options
- Explain how to set the default value (initial value) when using angularjs's ng-options
- Method for setting data synchronization in ng-model-options in angularJs
Trends