什么情况下会需要动态绑定 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 select 赋值 ng-options配置方法
- AngularJS基础 ng-model-options 指令简单示例
- Angular中ng-options下拉数据默认值的设定方法
- AngularJS中ng-options实现下拉列表的数据绑定方法
- angular指令笔记ng-options的使用方法
- 详解使用angularjs的ng-options时如何设置默认值(初始值)
- AngularJS学习笔记之ng-options指令
- angularJs中ng-model-options设置数据同步的方法
