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 的数据指定。

说的这么抽象，不如马上来看下吧。

{{className}}



送出  



// 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，成功取得资料。

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