AngularJS动态绑定ng-options的ng-model

http://www.it165.net/pro/html/201304/5564.html

什么情况下会需要动态绑定 ng-model 呢？若你的数据结构长得像是下面这样：

 

view source print ?

1. var Classes = [

2. {

3. "Name" : "温度 " ,

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

5. {

6. "Name" : "份量 " ,

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

8. ];

此时你需要用 ng-repeat 将数据展开，并且将 Options 个别设置为 ng-options 的数据，此时就须要动态去绑定 ng-model，那么该如何绑呢？你可能需要在你的 Controller 底下加上一个变量来做这些动态呈现的 ng-options 的数据指定。 www.it165.net

说的这么抽象，不如马上来看 Code 吧。

 

view source print ?

01. <!-- DOM -->

02.  

03. <div class ="container">

04.  

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

06.  

07. {{class.Name}}

08.  

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

10.  

11. </div>

12.  

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

14.  

15. </div>

16.  

17.  

18.  

19. // Javascript

20.  

21. function DemoController($scope){

22.  

23. $scope.classes = [

24.  

25. {

26.  

27. "Name": "温度 ",

28.  

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

30.  

31. },

32.  

33. {

34.  

35. "Name": "份量 ",

36.  

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

38.  

39. }

40.  

41. ];

42.  

43. $scope.SelectdCollection = {};

44.  

45. $scope.submit = function() {

46.  

47. console .log($scope. SelectdCollection);

48.  

49. };

50.  

51. }

在这一小段程序代码中，我们在 DemoController 里面宣告了 $scope.SelectdCollection，这就是刚才提到的承接动态 ng-model 值的对象，这边定义了一个按钮，按下之后可以及时把动态呈现的 ng-options 所选的值丢到开发者工具的 console 去。

实际画面会是长这样。

 

 

按下送出可以在开发者工具看到如下的 log，成功取得资料。