[AngularJS] 動態綁定 ng-options 的 ng-model

2013-04-27

3284
0

什麼情況下會需要動態綁定 ng-model 呢？若你的資料結構長得像是下面這樣：


var Classes = [

{

"Name" : "溫度 " ,

"Options" : [ "Cold" , "Hot" , "Normal" ]},

{

"Name" : "份量 " ,

"Options" : [ "Big" , "Middle" , "Small" ]}

];

此時你需要用 ng-repeat 將資料展開，並且將 Options 個別設置為 ng-options 的資料，此時就須要動態去綁定 ng-model，那麼該如何綁呢？你可能需要在你的 Controller 底下加上一個變數來做這些動態呈現的 ng-options 的資料指定。

說的這麼抽象，不如馬上來看 Code 吧。


<!-- DOM -->

<div class ="container">

<div ng-repeat= "class in classes">

          {{class.Name}}

<select ng-model="SelectdCollection[class.Name]" ng-options="option for option in class.Options" ></select>

</div>

<a class="btn btn-success" ng-click= "submit()">送出 </a>

</div>


// Javascript

function DemoController($scope){

$scope.classes = [

{

"Name": "溫度 ",

"Options" : ["Cold" , "Hot", "Normal"]

},

{

"Name": "份量 ",

"Options" : ["Big" , "Middle" , "Small" ]

}

];

$scope.SelectdCollection = {};

$scope.submit = function() {

     console .log($scope. SelectdCollection);

};

}

在這一小段程式碼中，我們在 DemoController 裡面宣告了 $scope.SelectdCollection，這就是剛才提到的承接動態 ng-model 值的物件，這邊定義了一個按鈕，按下之後可以及時把動態呈現的 ng-options 所選的值丟到開發者工具的 console 去。

實際畫面會是長這樣。

按下送出可以在開發者工具看到如下的 log，成功取得資料。

AngularJS

回首頁