http://www.it165.net/pro/html/201304/5564.html
什么情况下会需要动态绑定 ng-model 呢?若你的数据结构长得像是下面这样:
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 吧。
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,成功取得资料。