AngularJS——select使用及默认值详解

在angularjs中，select设置默认值特别不方便，如果动态的改变用原生的就更不是不好解决了，那就需要用angularjs为select提供的属性和方法了。

select中的ngOption可以采用和ngRepeat指令类似的循环结构，其data source可以是array或者是object。针对两种data source又有衍生的好几种用法。

JS代码如下：

function selectCtrl($scope) {
    $scope.selected = '';

    $scope.model = [{
        id: 1,
        name:'David',
        sex:'男'
    },{
        id: 2,
        name:'Rose',
        sex:'女'
    }, {
        id: 3,
        name:'Lee',
        sex:'男'
    }];
}

第一种：laber for value in array;

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

PS:x是自定义的，代表数组的各个对象，x.name就是选项中要显示的值。label可以随便写，很多功能；如：

<select ng-model="selected" ng-options="（x.name+'--'+x.sex) for x in model">
    <option value="">-- 请选择 --</option>
</select>

这样都是可以的！

第二种：label group by group for value in array；

<select ng-model="selected" ng-options="x.name group by x.sex for x in model">
    <option value="">-- 请选择 --</option>
</select>

PS: x.name group by x.sex for x in model;这句话的意思就是把数组model里的各个x对象的以性别分组，将名字显示在下拉框里。

第三种： select as label for value in array；

<select ng-model="selected" ng-options="x.id as x.name for x in model">
    <option value="">-- 请选择 --</option>
</select>

PS:这是最复杂的一种结构，它吧ng-model重新附了值，在这里ng-model=selected=x.id;这样也就可以设置默认值了，只要在js代码中写这一句话：

<span style="font-size:14px;color:#666666;background-color: rgb(255, 255, 255);">$scope.selected = n;</span>

如果给ng-model = x.id;那么就可以根据数组里面的各个对象的id来设置$scope.selected的值，这样就可以设置下拉框select的默认值了。

参考文献：点击打开链接http://www.runoob.com/angularjs/angularjs-select.html