溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
什么情況下會需要動態綁定 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，成功取得資料。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
