AngularJS study notes of the ng ES2en instruction

1. Basic pull-down effect (lable for value in array)

The ng-ES10en attribute in the select tag must have the value of the selected object or attribute value.

<div ng-controller="ngselect">
  <p>usage:label for value in array</p>
  <p> Options, {{selected}}</p>
  <select ng-model="selected" ng-options="o.id for o in optData">
    <option value="">--  Please select a  --</option>
  </select>
</div>
m1.controller("ngselect",['$scope',function($sc){
  $sc.selected = '';
  $sc.optData = [{
    id: 10001,
    MainCategory: ' male ',
    ProductName: ' Water washing T The T-shirt ',
    ProductColor: ' white '
  },{
    id: 10002,
    MainCategory: ' female ',
    ProductName: '  �   �  with short sleeves ',
    ProductColor: ' � '
  },{
    id: 10003,
    MainCategory: ' female ',
    ProductName: '  �   �  with short sleeves ',
    ProductColor: ' � '
  }];
}]);

2. Custom drop-down display name (label for value in array)

label can concatenate different strings as needed

<div ng-controller="ngselect2">
  <p>usage:label for value in array(label You can concatenate different strings as needed )</p>
  <p> Options, {{selected}}</p>
  <select ng-model="selected" ng-options="(o.ProductColor+'-'+o.ProductName) for o in optData">
    <option value="">--  Please select a  --</option>
  </select>
</div>
m1.controller("ngselect2",['$scope',function($sc){
  $sc.selected = '';
  $sc.optData = [{
    id: 10001,
    MainCategory: ' male ',
    ProductName: ' Water washing T The T-shirt ',
    ProductColor: ' white '
  },{
    id: 10002,
    MainCategory: ' female ',
    ProductName: '  �   �  with short sleeves ',
    ProductColor: ' � '
  },{
    id: 10003,
    MainCategory: ' female ',
    ProductName: '  �   �  with short sleeves ',
    ProductColor: ' � '
  }];
}]);

3. Grouping of ES25en-ES26en options

group by grouped items

<div ng-controller="ngselect3">
  <p>usage:label group by groupName for value in array</p>
  <p> Options, {{selected}}</p>
  <select ng-model="selected" ng-options="(o.ProductColor+'-'+o.ProductName) group by o.MainCategory for o in optData">
    <option value="">--  Please select a  --</option>
  </select>
</div>
m1.controller("ngselect3",['$scope',function($sc){
  $sc.selected = '';
  $sc.optData = [{
    id: 10001,
    MainCategory: ' male ',
    ProductName: ' Water washing T The T-shirt ',
    ProductColor: ' white '
  },{
    id: 10002,
    MainCategory: ' female ',
    ProductName: '  �   �  long sleeve ',
    ProductColor: ' � '
  },{
    id: 10003,
    MainCategory: ' female ',
    ProductName: '  �   �  with short sleeves ',
    ProductColor: ' � '
  }];
}]);

4. ng-options Custom ngModel binding

selected values for optData id effect below http: / / sandbox runjs. cn/show/nhi8ubrb

<div ng-controller="ngselect4">
  <p>usage:select as label for value in array</p>
  <p> Options, {{selected}}</p>
  <select ng-model="selected" ng-options="o.id as o.ProductName for o in optData">
    <option value="">--  Please select a  --</option>
  </select>
</div>
m1.controller("ngselect4",['$scope',function($sc){
  $sc.selected = '';
  $sc.optData = [{
    id: 10001,
    MainCategory: ' male ',
    ProductName: ' Water washing T The T-shirt ',
    ProductColor: ' white '
  },{
    id: 10002,
    MainCategory: ' female ',
    ProductName: '  �   �  long sleeve ',
    ProductColor: ' � '
  },{
    id: 10003,
    MainCategory: ' female ',
    ProductName: '  �   �  with short sleeves ',
    ProductColor: ' � '
  }];
}]);

Effect: http: / / runjs cn/detail/nhi8ubrb

This is the end of this article, I hope you enjoy it.