温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-10-11 21:23:50 来源:脚本之家 阅读:367 作者:XINGXUEXX 栏目:web开发

什么情况下会需要动态绑定 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实例代码

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI