AngularJS动态绑定ng-options的ng-model实例代码
更新时间：2017年06月21日 10:08:57 作者：XINGXUEXX
本篇文章主要介绍了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>
// 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 去。
实际画面会是长这样。
按下送出可以在开发者工具看到如下的 log，成功取得资料。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
一个缓存就是一个组件，它可以透明地储存数据，以便以后可以更快地服务于请求。这篇文章主要介绍了AngularJS中的缓存使用，有兴趣的可以了解一下。2017-01-01
这篇文章主要介绍了AngularJS实现图片上传和预览功能的方法,结合HTML5实例形式对比分析了AngularJS图片上传的相关操作技巧与注意事项,需要的朋友可以参考下2017-11-11
Angular中使用Intersection Observer API实现无限滚动效果
这篇文章主要介绍了Angular中使用Intersection Observer API实现无限滚动,实现原理为 在data下面加一个loading元素 如果此元素进入视窗 则调用api获取新的数据加到原来的数据里面,这时loading就会被新数据顶下去,感兴趣的朋友一起看看吧2023-12-12
这篇文章主要为大家介绍了Angular懒加载动态创建显示该模块下声明的组件，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-05-05
这篇文章主要介绍了AngularJS指令用法,较为详细的分析了AngularJS指令的功能、用法及自定义指令的相关实现技巧,需要的朋友可以参考下2016-11-11
本文主要介绍AngularJS HTML DOM基础知识，这里整理了相关资料和示例代码进行详解，有需要的小伙伴可以参考下2016-08-08
本篇文章主要介绍了Angular 如何使用第三方库的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了AngularJS中的作用域,结合实例形式较为详细的分析了AngularJS涉及作用域的相关问题与注意事项,需要的朋友可以参考下2018-05-05
Angular6使用forRoot() 注册单一实例服务问题
这篇文章主要介绍了Angular6使用forRoot() 注册单一实例服务问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
本篇文章主要介绍了angularJS 指令封装回到顶部示例详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
最新评论