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

2019-11-19 16:17:40

字体：大中小

来源：转载

供稿：网友

什么情况下会需要动态绑定 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>// Javascriptfunction 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 去。

实际画面会是长这样。