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，成功取得资料。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
问题内容： 我有这个reprohttp://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq，当我单击“ Title3”并在文本框中输入一个值时显示，尽管输入的值显示在UI中，当我单击“单击”按钮时，什么也没有绑定到范围属性$ scope.test。 我不知道ng-switch有什么问题，或者我做错了什么。帮助表示赞赏！！！ http://embed.plnkr.co/nVC
-
问题内容： 我刚刚升级到角度版本1.3.8。 当使用1.2.23版本时，我创建了一条指令来将数据表单视图转换为模型，反之亦然。 这是我的指令： }）; 我在这里看到现在支持绑定中的getter和setter，但是我在任何地方 都 找不到如何同时使用getter 和 setter的方法。有什么办法吗？那就是-ng-model- options可以代替我的convert指令吗？ 谢谢 问题答案： 该文
-
问题内容： 我正在尝试处理ng-repeat循环内的范围问题-我浏览了很多问题，但还无法使我的代码正常工作。 控制器代码： 视图： 这是一个小提琴：http : //jsfiddle.net/cyberwombat/zqTah/ 基本上，我有一个包含多行文本的对象（这是一个传单生成器）。用户可以调整每行文本（文本，字体，大小，颜色等），我想为其创建预览。上面的示例仅显示了输入文本的输入字段，我希望
-
问题内容： 如果我的措词不正确，我事先表示歉意。我在的内部有一个文本框，当我尝试获取文本框值时始终为。我只希望它显示我在相应文本框中键入的内容。 似乎是一个问题，那么我该如何创建全局或控制器根级别以便可以访问它？ 这是帮助解决问题的JSFiddle：http : //jsfiddle.net/stevenng/9mx9B/14/ 问题答案： 在您的点击表达式中，您可以引用并在您的函数中对其进行访问
-
本文向大家介绍AngularJS实现select的ng-options功能示例，包括了AngularJS实现select的ng-options功能示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了AngularJS实现select的ng-options功能。分享给大家供大家参考，具体如下： controller html 实现的DOM 可以用ng-change事件监控来看看输出的是什么
-
问题内容： 这是日期字段的html： 日期选择器显示在输入字段中。但是，如果我在控制器中执行此操作： 我懂了。如何解决呢？ 有没有办法使用更好的方法有？ 我不想使用，因为我的项目充满了JavaScript库。 问题答案： 正如@lort所建议的那样，您无法从控制器访问datepicker模型，因为datepicker具有其自己的私有范围。 如果您设置： 并在控制器中定义： 您可以使用以下方式访问日