在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:'男'
}];
}
<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的默认值了。