AngularJS中ng-options实现下拉列表的数据绑定方法

前端之家收集整理的这篇文章主要介绍了AngularJS中ng-options实现下拉列表的数据绑定方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

下拉列表的简单使用

@H_403_3@

ng-option指令使用很简单,只需要绑定两个属性:@H_403_3@

一个是ng-model用于获取选定的值;@H_403_3@

另一个是ng-options用于确定下拉列表的元素数组。@H_403_3@

上面这条语句就是把选择的值与engineer.currentActivity进行双向数据绑定,然后列表中的选项是activities中的每一个值。数据如下:@H_403_3@

$scope.activities =
[
"Writing code","Testing code","Fixing bugs","Dancing"
];

运行结果如:@H_403_3@

@H_403_3@@H_403_3@

为了美观一点,这里引用了bootstrap。@H_403_3@

复杂对象,自定义列表名称

@H_403_3@

有的时候下拉列表并不是单纯的字符串数组,可能是json对象,例如:@H_403_3@

这个时候,绑定的数据就必须是与这里面的格式相同的数据,比如直接复制其中一条:@H_403_3@

当然也可以直接指定成:@H_403_3@

然后在指令中可以循环列表拼接处下拉框的名称

@H_403_3@

运行效果如:@H_403_3@

@H_403_3@@H_403_3@

全部的代码如下:@H_403_3@

实现下拉列表的分组

@H_403_3@

其实分组与前面的例子很像,只要把空间中的ng-options的值换成下面:@H_403_3@

添加 group by 就会按照后面的值进行分组@H_403_3@

@H_403_3@@H_403_3@

全部代码:@H_403_3@

按照id进行标识

@H_403_3@

由于之前的ng-model相当于初始的时候给设定了一个值。当你选择一个下拉列表选项的时候,就会覆盖掉这个初始值。@H_403_3@

所以更多的时候会使用一个id进行标识,这样在初始化赋值的时候,只需要设定一个id就可以了。@H_403_3@

$scope.activities =
[
{ id: 1,name: "Dancing" }
];

指令可以写成下面的格式@H_403_3@

通过 as 前面的值,就可以确定唯一的一个选项@H_403_3@

@H_403_3@@H_403_3@

全部代码如下:@H_403_3@

以上这篇AngularJS中ng-options实现下拉列表的数据绑定方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。@H_403_3@

猜你在找的JavaScript相关文章