AngularJS杂记9----玩转ng-options指令：工作中的常见操作

玩转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}

]