当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > AngularJS动态绑定ng-options的ng-model实例代码

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

什么情况下会需要动态绑定 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，成功取得资料。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网