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

来源:互联网 发布:python api文档 编辑:程序博客网 时间:2024/03/28 23:17

在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






0 0
原创粉丝点击