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

下拉列表的简单使用

尼日利亚选项指令使用很简单，只需要绑定两个属性：

一个是尼日利亚模型用于获取选定的值；

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

选择ng-model='工程师。当前活动' class=' form-control ' ng-options=' act for act in activities '/select上面这条语句就是把选择的值与工程师。电流活性进行双向数据绑定，然后列表中的选项是活动中的每一个值。数据如下：

$ scope。工程师={ name : ' Dani '，当前活动： ' fireing bug ' }；$scope.activities=["编写代码"、"测试代码"、"修复bug“，”跳舞"];运行结果如：

为了美观一点，这里引用了自举。

html ng-app=' myApp ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/script src=' http :http://apps。bdimg。com/libs/angular。js/1。2 .16/棱角分明。量滴js '/脚本链接rel='样式表href=' http://应用程序。bdimg。com/libs/bootstrap/3。3 .0/CSS/bootstrap。量滴CSS ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external yapp '模块。控制器('工程控制器'，['$scope '，函数($ scope){ $ scope。工程师={ name : ' Dani '，当前活动： ' fireing bug ' }；$scope.activities=["编写代码"、"测试代码"、"修复bug“，”跳舞"];}]);/脚本/正文/html复杂对象，自定义列表名称

有的时候下拉列表并不是单纯的字符串数组，可能是数据对象，例如：

$scope.activities=[ { id: 1，type: 'Work '，name: 'Writing code' }，{ id: 2，type: 'Work '，name: 'Testing code' }，{ id: 3，type: 'Work '，name: ' Fixing bugs ' }，{ id: 4，type: 'Play '，name 333: ' Dancing ' }]]这个时候，绑定的数据就必须是与这里面的格式相同的数据，比如直接复制其中一条：

$ scope。工程师={姓名： ' Dani '，当前联系人姓名： { id: 3，类型： 'Work '，姓名name: ' Fixing bugs ' } }当然也可以直接指定成：

$ scope。工程师={当前活动：活动[3]}然后在指令中可以循环列表拼接处下拉框的名称

为在活动/选择中选择ng-model='工程师。current activity ' class=' form-control ' ng-options=' a . name '(' a . type ')运行效果如：

全部的代码如下：

html ng-app=' myApp ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/script src=' http :http://apps。bdimg。com/libs/angular。js/1。2 .16/棱角分明。量滴js '/脚本链接rel='样式表href=' http://应用程序。bdimg。com/libs/bootstrap/3。3 .0/CSS/bootstrap。量滴CSS ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external yapp '模块。控制器('工程控制器'，['$scope '，函数($ scope){ $ scope。工程师={ name : ' Dani '，currentActivity: { id: 3，type: 'Work '，name : ' fireing bug ' } } } }；$scope.activities=[ { id: 1，type: 'Work '，name: 'Writing code' }，{ id: 2，type: 'Work '，name: 'Testing code' }，{ id: 3，type: 'Work '，name: ' Fixing bugs ' }，{ id: 4，type: 'Play '，name 333: ' Dancing ' }]]}]);/脚本/正文/html实现下拉列表的分组

其实分组与前面的例子很像，只要把空间中的ng-选项的值换成下面：

选择ng-model='工程师。current activity ' class=' form-control ' ng-options=' a . name group by a . type for a in activities '/select添加分组依据就会按照后面的值进行分组

全部代码：

html ng-app=' myApp ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/script src=' http :http://apps。bdimg。com/libs/angular。js/1。2 .16/棱角分明。量滴js '/脚本链接rel='样式表href=' http://应用程序。bdimg。com/libs/bootstrap/3。3 .0/CSS/bootstrap。量滴CSS ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external-选择ng-model='工程师。current activity ' class=' form-control ' ng-options=' a . name '(' a . type ')用于“在活动中”/选择-选择ng-model='工程师。current activity ' class=' form-control ' ng-options=' a .按. type命名组用于“在活动中”/选择/div /div脚本类型=' text/JavaScript ' var myApp模块=angular。模块(' myApp '，[])；myapp模块。控制器('工程控制器'，['$scope '，函数($ scope){ $ scope。工程师={ name : ' Dani '，currentActivity: { id: 3，type: 'Work '，name : ' fireing bug ' } } } }；$scope.activities=[ { id: 1，type: 'Work '，name: 'Writing code' }，{ id: 2，type: 'Work '，name: 'Testing code' }，{ id: 3，type: 'Work '，name: ' Fixing bugs ' }，{ id: 4，type: 'Play '，name 333: ' Dancing ' }]]}]);/脚本/正文/html按照编号进行标识

由于之前的尼日利亚模型相当于初始的时候给设定了一个值。当你选择一个下拉列表选项的时候，就会覆盖掉这个初始值。

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

$ scope。工程师={ CurrentVitYid : 3 }；$scope.activities=[ { id: 1，type: 'Work '，name: 'Writing code' }，{ id: 2，type: 'Work '，name: 'Testing code' }，{ id: 3，type: 'Work '，name: ' Fixing bugs ' }，{ id: 4，type: 'Play '，name 333: ' Dancing ' }]]指令可以写成下面的格式

为在活动/选择中选择ng-model='工程师。currentitvityid ' class=' form-control ' ng-options=' a . id作为a .姓名分组依据通过如同前面的值，就可以确定唯一的一个选项

全部代码如下：

html ng-app=' myApp ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/script src=' http :http://apps。bdimg。com/libs/angular。js/1。2 .16/棱角分明。量滴js '/脚本链接rel='样式表href=' http://应用程序。bdimg。com/libs/bootstrap/3。3 .0/CSS/bootstrap。量滴CSS ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external yapp '模块。控制器('工程控制器'，['$scope '，函数($ scope){ $ scope。工程师={ currentitvityid : 3 }；$scope.activities=[ { id: 1，type: 'Work '，name: 'Writing code' }，{ id: 2，type: 'Work '，name: 'Testing code' }，{ id: 3，type: 'Work '，name: ' Fixing bugs ' }，{ id: 4，type: 'Play '，name 333: ' Dancing ' }]]}]);/脚本/正文/html以上这篇AngularJS中ng-选项实现下拉列表的数据绑定方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。