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 去。

實際畫面會是長這樣。