玩转ng-options指令:工作中的常见操作
作为web菜鸟,在工作中写各类下拉框时,需要考虑一些小问题:
- 关于下拉框使用
ng-repeat
或者ng-options
指令的区别 - 关于下拉框的默认选项如何设置
- 关于下拉框选项的model值如何绑定
- 关于下拉框的禁用选项问题
- 关于下拉框的分组问题
- 关于下拉框的排序问题
ng-init
指令或者在控制器中对
model
值进行赋值来达到这个目的的。
关于ng-repeat 与 ng-options的 选择,当下拉列表循环的只是一些简单的字符串或者数字的时候,使用这两个指令都是可以的;但是一些比较复杂的数据并且还有一些附带的其它要求的时候,应该使用ng-options。
下面是关于ng-options使用复杂表达式的详解:
1、表达式语法:select as label for value in array
首先说下上面表达式什么意思,作为菜鸟,我当初在项目中遇到的时候,一脸懵逼。。
这个表达式的后半部分都好理解就是前部分。array表示我们需要循环的数组,value表示这个数组中循环出来的单独的一个对象,select和label都是这个对象的两个属性,其中select还可以表示整个对象。label表示下拉框中要显示出来的选项内容,select表示的是下拉框被选中某一个label时,对应的下拉框的model值。简单来说就是,label就是下拉框需要显示出来让你选择的选项,select是你选中那个选项时,下拉列表的model值。案例:
HTML:
<select ng-model = "myModel" ng-init = "myModel = items[0].value"
ng-options = "a.value as a.name for a in items">
</select>
JS
:
$scope.items = [
{name:'选项一',value:1},
{name:'选项二',value:2},
{name:'选项三',value:3},
]
2、表达式语法:label group by group for value in array
其中前面的group by是固定的,后面的group是分组的依据。案例:
HTML:
<select ng-model = "myModel" ng-init = "myMoldel = items[0]"
ng-options = "a.name group by a.group for a in items">
JS:
$scope.items = [
{name:'选项一',value:1,group:'A'},
{name:'选项二',value:2,group:'A'},
{name:'选项三',value:3,group:'A'},
{name:'选项四',value:4,group:'B'},
{name:'选项五',value:5,group:'B'},
{name:'选项六',value:6,group:'C'},
{name:'选项七',value:7,group:'C'}
]
3、表达式语法:select as label disabled when disabled for value in array
disabled when 是固定的语句,后面的disabled是条件,如果条件是true,则该项不可被选中。
HTML:
<select ng-model = "myModel" ng-init = "myModel =items[0].value"
ng-options = "a.value as a.name disable when a.show for a in items">
</select>
JS:
$scope.items = [
{name:'选项一',value:1},
{name:'选项二',value:2,show:true},
{name:'选项三',value:3},
{name:'选项四',value:4,show:true},
{name:'选项五',value:5}
]
4、表达式语法:label disable when disable for value in array
HTML:
<select ng-model = "myModel" ng-init = " myModel = items[0]"
ng-options = " a.name disable when a.show for a in items">
</select>
JS:
$scope.items = [
{name:'选项一',value:1},
{name:'选项二',value:2,show:true},
{name:'选项三',value:3},
{name:'选项四',value:4,show:true},
{name:'选项五',value:5}
]
这个例子A和前一个B很相似,但是是有区别的。A的下拉框的model值是一个对象,B的下拉框的model只是一个数字。
------------------------------------------------------更新20171110----------------------------------------
5、表达式语法:lable for value in array trck by trackexpr
track by 使用用来标识数组中的每个对象的,当这个数组再次被重新创建或者更新时,已经选择的选项会被保留下来,也就是说,会保留当时的选择状态。
案例:
JS(用于改变更新数组的函数):
function changeItems(){
$scope.xx = [
{name:'选项一',value:1,id:1},
{name:'选项二',value:2,id:2},
{name:'选项三',value:3,id:3},
{name:'选项4',value:4,id:4}
]
}
HTML:
<select multiple ng-model = "xx" ng-init = "xx = []"
ng-options = a.name for a in xx track by a.id >
</select>
JS(原始数据准备):
$scope.xx = [
{name:'选项一',value:1,id:1},
{name:'选项二',value:2,id:2},
{name:'选项三',value:3,id:3}
]
6、表达式语法:
lable for value in array | orderBy : expr track by trackexpr
在表达式中插入orderBy过滤器,让下拉框可以按照我们的要求就行排列,让我用起来更加方便。
HTML:
<select ng-model = "xx" ng-init = "xx = xx[xx.length - 1 ]"
ng-options = "a.name for a in xx | orderBy: ['value'] track by a.id">
</select>
JS:
$scope.xx = [
{name:'选项一',value:3,id:1},
{name:'选项二',value:2,id:2},
{name:'选项三',value:1,id:3}
]