当前位置:首页 > 日记 > 正文

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

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

什么情况下会需要动态绑定 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>// Javascriptfunction 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 去。

实际画面会是长这样。

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

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

相关文章

怎么在excel中做出聚光灯效果在exc

怎么在excel中做出聚光灯效果在exc

步骤,方法,聚光灯,效果,电脑软件,  核对数据是一个耗眼力的活,尤其是在大量数据的情况下,但如果能在核对的时候排除干扰,工作量会多。下面小编就教你怎么在excel中做出聚光灯效果。excel中做出聚光灯效果的步骤全选数据,然后,开始&mdash;&mdas…

PS菜单栏怎么添加颜色? PS自定义菜

PS菜单栏怎么添加颜色? PS自定义菜

命令,菜单栏,自定义菜单,教程,颜色,ps菜单栏中命令想要添加颜色,方便查找和使用,该怎么添加呢?下面我们就来看看详细的教程。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、首先,点击上方的编辑。2、编…

excel 自动填充上行公式的方法步骤

excel 自动填充上行公式的方法步骤

方法,上行,自动填充,步骤,公式,  Excel中经常需要使用到函数公式进行计算,函数公式具体该如何自动填充上一行呢?小编整理了excel 自动填充上行公式的方法,希望对你有帮助!excel 自动填充上行公式的方法自动填充上行公式步骤1:打开需要处理的E…

JavaScript异步上传文件的实例代码

JavaScript异步上传文件的实例代码

异步,实例代码,上传文件,电脑软件,JavaScript,html:<form action="url" enctype="multipart/form-data" id="myform" method="post"> <input accept="image/*" id="addfile" type="file" /></form> jquery:$("#addfile").…

QQ健康积分有什么用

QQ健康积分有什么用

什么用,积分,健康,电脑软件,QQ,  QQ健康积分有什么用?其实健康积分可以用来兑换丰富的礼品,那么怎么获取健康积分呢?下面就由小编来给大家说说QQ健康积分有什么用,欢迎大家前来阅读!QQ健康积分有什么用  1、打开手机QQ,点击&ldquo;动态&r…

JS中的Replace | 传入函数时的用法

JS中的Replace | 传入函数时的用法

函数,详解,电脑软件,JS,Replace,replace方法的语法是:stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string),reExp可以是正则表达式对象(RegExp)也可以是字符串(string),replaceText是替代查找到的字符串。。废话不多说了,直…

Photoshop详细解析电商啤酒瓶产品

Photoshop详细解析电商啤酒瓶产品

教程,产品,啤酒瓶,后期,详细,本教程主要使用Photoshop详细解析啤酒瓶后期精修教程,一般在广告设计里面和电商产品设计里需要这种修图技术,教程分为材质分离修图、瓶身修图、标签修图三大部分,感兴趣的朋友一起去学习吧。12 阅读全文…

JS实现简易的拖拽排序实例代码

JS实现简易的拖拽排序实例代码

排序,实例代码,拖拽,简易,电脑软件,由HTML5的拖放API,实现的简易图片拖放效果。一、HTML5拖放API的知识点首先我们得知道元素怎么才可以被拖放,需要设置它们的draggable属性,其中img和a标签的dragable属性默认是true,不需要我们手动设置。拖放A…

jquery dataTable 后台加载数据并

jquery dataTable 后台加载数据并

分页,后台,加载数据,实例代码,电脑软件,使用 dataTable后台加载数据并分页。网上版本很多,但很多都是不能用或者不详细的,这里是已经验证过的。引用 js文件<script src="static/ace/js/jquery-2.0.3.min.js"></script><script src="static…

ps怎么设计一款3D立体文字效果?

ps怎么设计一款3D立体文字效果?

3D,文字效果,电脑软件,ps,ps中想要设计立体文字,该怎么设计呢?下面我们就来看看效果图,希望的朋友可以学习一下。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、按CTRL+N新建一个600*600的文档,按SHIFT+…

解析Asp.net Core中使用Session的

解析Asp.net Core中使用Session的

方法,电脑软件,net,Asp,Session,前言2017年就这么悄无声息的开始了,2017年对我来说又是特别重要的一年。元旦放假在家写了个Asp.net Core验证码登录, 做demo的过程中遇到两个小问题,第一是在Asp.net Core中引用dll,以往我们引用DLL都是直接引用…

javascript操作cookie

javascript操作cookie

操作,电脑软件,javascript,cookie,前端js cookie的使用cookie的作用:服务器可以利用Cookies包含信息的任意性来筛选并经常性维护这些信息,以判断在HTTP传输中的状态。Cookies最典型的应用是判定注册用户是否已 经登录网站,用户可能会得到提示,…