AngularJs——ng-options总结

1、最平常的一种形式，select的默认形式是ng-model的值等于你想选中的对象，没有默认的空白值

例如：

js：function Ctrl($scope) {
            $scope.colors = [
                {name:'black', shade:'dark'},
                {name:'white', shade:'light'},
                {name:'red', shade:'dark'},
                {name:'blue', shade:'dark'},
                {name:'yellow', shade:'light'}
            ];
            $scope.myColor = $scope.colors[2]; // red
        }

jsp：

//这里的是指option里展示的是name的值，ng-model 的值是选中的这个对象(color.name是显示的形式，也可以是字符串例如（color.name+'-'+color.shade）)

   <select ng-model="myColor" ng-options="color.name for color in colors"></select><br>

//这里是指按照color的形状来排序，展示的是名字，ng-model是对象(group by 是按照什么排序)

    <select ng-model="myColor" ng-options="color.name group by color.shade for color in colors"></select><br>

//color.id是指给ng-model赋值，也就是说ng-model的值是选中的color的id，后台默认选中的时候要根据ng-model是对应对象的那个属性或就是这一个对象，来个ng-model赋值才可以

<select ng-model="myColor" ng-options="color.id as color.name group by color.shade for color in colors"></select><br>

2、有空白的值，一般在筛选的时候会用这样的形式

 <span class="nullable">
    <select ng-model="myColor" ng-options="color.name for color in colors">
        <option value="">-- choose color --</option>
    </select>
  </span><br/>

3、将同一个对象的不同属性放在下拉框中

js：$scope.user = {name:"jack", age:18, sex:"man"};

jsp： <select ng-model="x" ng-options="k for (k , v) in user" ng-change="change()">

        <option value="">--请选择--</option>
    </select>