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.