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 相关文章推荐
JS解决ie6下png透明的方法实例
Aug 02 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
JS实现上下左右对称的九九乘法表
Feb 22 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
微信小程序中input标签详解及简单实例
May 18 Javascript
JS简单添加元素新节点的方法示例
Feb 10 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 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
php输出xml格式字符串(用的这个)
2012/07/12 PHP
PHP中的事务使用实例
2015/05/26 PHP
php加密解密字符串示例
2016/10/13 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
php生成无限栏目树
2017/03/16 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
Jquery 表单验证类介绍与实例
2013/06/09 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
2015/10/14 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
vue中的ref和$refs的使用
2018/11/22 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
python中nan与inf转为特定数字方法示例
2017/05/11 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
DataList 能否分页,请问如何实现?
2015/05/03 面试题
商务英语求职自荐信范文
2013/12/24 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
解除同居协议书
2015/01/29 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
使用nginx配置访问wgcloud的方法
2021/06/26 Servers