时间:2021-05-28
什么情况下会需要动态绑定 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,成功取得资料。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
AngularJS获取ng-repeat动态生成的ng-model值最近做项目遇到了ng-model是ng-repeat动态生成的,ng-model=”变量”,
ng-bind和ng-model的区别AngularJS的数据绑定有ng-bind和ng-model,一般用于如下:ng-bind是单向绑定,由作用于$scop
下拉列表的简单使用ng-option指令使用很简单,只需要绑定两个属性:一个是ng-model用于获取选定的值;另一个是ng-options用于确定下拉列表的元
AngularJS表单验证功能实现代码:ng-model的作用:1.ng-model指令可以将输入域的值与AngularJS创建的变量绑定2.双向绑定,在修改输
今天在ionic中使用ng-model时候,在对应的controller里面获得值为undefined。以前在使用angularjs的ng-model绑定时候就