Select Angularjs Example

Elect a set of Directive AngularJS is preset. The following is the usage of its website API doc gives: AngularJS:select

Effect, select the ngOption and ngRepeat commands can be used in a similar loop structure, the data source can be an array or object. Two data source has several derived usages. But the official website of the example is too small.

Here are several examples of usage is not easy to understand.
On the first controller

Code:

<!-- lang: js -->
function selectCtrl($scope) {
    $scope.selected = '';

    $scope.model = [{
        id: 10001,
        mainCategory: '男',
        productName: '水洗T恤',
        productColor: '白'
    }, {
        id: 10002,
        mainCategory: '女',
        productName: '圆领短袖',
        productColor: '黑'
    }, {
        id: 10003,
        mainCategory: '女',
        productName: '短袖短袖',
        productColor: '黃'
    }];
}

Example: basic drop effect

usage: label for value in array

Code:

<select ng-model="selected" ng-options="m.productName for m in model">
    <option value="">-- 请选择 --</option>
</select>

Effect:


Introductions

Usage value which is of NG-options m, and m is an element of an array model, it is a variable

In the usage of the label that is NG-options m.productName, is actually a AngularJS Expression

Example two: custom dropdown display name
usage: label for value in array

Code:

<select ng-model="selected" ng-options="(m.productColor + ' - ' + m.productName) for m in model">
    <option value="">-- 请选择 --</option>
</select>

Introductions

As you can see, usage label according to demand in splicing different string
Example three: group options

usage: label group by group for value in array

Code:

<select ng-model="selected" ng-options="(m.productColor + ' - ' + m.productName) group by m.mainCategory for m in model">
    <option value="">-- 请选择 --</option>
</select>

Using Group by and group by mainCategory $scope.model field

Example four: the value of the custom ngModel

usage: select as label for value in array

This usage is also a select command of the most complex. As can be seen from the effects, select role usage is to redefine the value of NG-model. Here, NG-model is equal to m.ID, when NG-model changes when given m.ID