AngularJS动态绑定ng-options的ng-model实例代码


Posted in Javascript onJune 21, 2017

什么情况下会需要动态绑定 ng-model 呢?若你的数据结构长得像是下面这样:

var Classes = [
{
"Name" : "温度 " ,
"Options" : [ "Cold" , "Hot" , "Normal" ]},
{
"Name" : "份量 " ,
"Options" : [ "Big" , "Middle" , "Small" ]}
];

此时你需要用 ng-repeat 将数据展开,并且将 Options 个别设置为 ng-options 的数据,此时就须要动态去绑定 ng-model,那么该如何绑呢?你可能需要在你的 Controller 底下加上一个变量来做这些动态呈现的 ng-options 的数据指定。

说的这么抽象,不如马上来看下吧。

<!-- DOM -->
<div class ="container">
<div ng-repeat= "class in classes">
{{className}}
<select ng-model="SelectdCollection[className]" ng-options="option for option in classOptions" ></select>

</div>
<a class="btn btn-success" ng-click= "submit()">送出 </a> 
</div>


// Javascript
function DemoController($scope){
$scopeclasses = [
{
"Name": "温度 ",
"Options" : ["Cold" , "Hot", "Normal"]
},
{

"Name": "份量 ",
"Options" : ["Big" , "Middle" , "Small" ]
}
];
$scopeSelectdCollection = {};
$scopesubmit = function() {
console log($scope SelectdCollection);

};
}

在这一小段程序代码中,我们在 DemoController 里面宣告了 $scope.SelectdCollection,这就是刚才提到的承接动态 ng-model 值的对象,这边定义了一个按钮,按下之后可以及时把动态呈现的 ng-options 所选的值丢到开发者工具的 console 去。

实际画面会是长这样。

AngularJS动态绑定ng-options的ng-model实例代码 

按下送出可以在开发者工具看到如下的 log,成功取得资料。

AngularJS动态绑定ng-options的ng-model实例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 Javascript
js如何取消事件冒泡
Sep 23 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
jQuery功能函数详解
Feb 01 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
js获取当前页的URL与window.location.href简单方法
Feb 13 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 #Javascript
基于jquery日历价格、库存等设置插件
Jul 05 #jQuery
详解Angular 自定义结构指令
Jun 21 #Javascript
详解Angular2 之 结构型指令
Jun 21 #Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 #Javascript
Angular.JS中指令ng-if的注意事项小结
Jun 21 #Javascript
jquery.validate表单验证插件使用详解
Jun 21 #jQuery
You might like
深入apache host的配置详解
2013/06/09 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
js数据类型检测总结
2018/08/05 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
python实现socket+threading处理多连接的方法
2019/07/23 Python
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
2019/08/22 Python
pycharm实现在虚拟环境中引入别人的项目
2020/03/09 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
什么是反射
2012/03/17 面试题
AJAX的优缺点都有什么
2015/08/18 面试题
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
文明寄语大全
2014/04/11 职场文书
会计专业求职信范文
2015/03/19 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书
python字符串常规操作大全
2021/05/02 Python
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL