AngularJS learning notes-ng-options directive _ AngularJS

Ng-options is a new instruction from angular-1.3. This article introduces the usage of this instruction. For more information, see. 1. Basic drop-down effect (lable for value in array)

The ng-model attribute in the select tag must exist, and its value is the selected object or attribute value.

  
Usage: label for value in array
  
Option, {selected }}
      -- Select --  
M1.controller ("ngselect", ['$ scope', function ($ SC) {$ SC. selected = ''; $ SC. optData = [{id: 10001, MainCategory: 'male', ProductName: 'washed tshirt ', ProductColor: 'white'}, {id: 10002, MainCategory: 'femal ', productName: 'shortlisted shortsleeved ', ProductColor: 'watermark'}, {id: 10003, MainCategory: 'Female', ProductName: 'shortlisted shortsleeved ', ProductColor: 'signature'}];}]);

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

The label can be spliced into different strings as needed.

  
Usage: label for value in array (the label can be spliced into different strings as needed)
  
Option, {selected }}
      -- Select --  
M1.controller ("ngselect2", ['$ scope', function ($ SC) {$ SC. selected = ''; $ SC. optData = [{id: 10001, MainCategory: 'male', ProductName: 'washed tshirt ', ProductColor: 'white'}, {id: 10002, MainCategory: 'femal ', productName: 'shortlisted shortsleeved ', ProductColor: 'watermark'}, {id: 10003, MainCategory: 'Female', ProductName: 'shortlisted shortsleeved ', ProductColor: 'signature'}];}]);

3. ng-options option Group

Group by group items

  
Usage: label group by groupName for value in array
  
Option, {selected }}
      -- Select --  
M1.controller ("ngselect3", ['$ scope', function ($ SC) {$ SC. selected = ''; $ SC. optData = [{id: 10001, MainCategory: 'male', ProductName: 'washed tshirt ', ProductColor: 'white'}, {id: 10002, MainCategory: 'femal ', productName: 'Zookeeper long sleeve ', ProductColor: 'wheel'}, {id: 10003, MainCategory: 'Female', ProductName: 'Zookeeper short sleeve ', ProductColor: 'signature'}];}]);

4. bind ng-options custom ngModel

The value of selected below is the id of optData effect http://sandbox.runjs.cn/show/nhi8ubrb

  
Usage: select as label for value in array
  
Option, {selected }}
      -- Select --  
M1.controller ("ngselect4", ['$ scope', function ($ SC) {$ SC. selected = ''; $ SC. optData = [{id: 10001, MainCategory: 'male', ProductName: 'washed tshirt ', ProductColor: 'white'}, {id: 10002, MainCategory: 'femal ', productName: 'Zookeeper long sleeve ', ProductColor: 'wheel'}, {id: 10003, MainCategory: 'Female', ProductName: 'Zookeeper short sleeve ', ProductColor: 'signature'}];}]);

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

The above is all the content of this article. I hope you will like it.