AngularJS中获取ng-repeat动态生成的ng-model值

angularJS动态设置model，并设置/获取model的值

代码

html

<div>
<div class="modal-header">
<h3 class="modal-title">用例集全局参数配置</h3>
</div>
<div class="modal-body">
<table class="table table-hover">
<thead>
<tr>
<th>参数</th>
<th>参数值</th>
</tr>
</thead>
<tbody ng-repeat="param in params">
<tr>
<td>{{param}}</td>
<td><input name="test" class="form-control" type="text" ng-trim="false" ng-model="$parent.conf[$index]"/></td>
</tr>
</tbody>
</table>

</div>

<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">
应用
</button>
<button class="btn btn-warning" ng-click="cancel()">取消</button>
</div>

</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

JS

var ModalInstanceCtrl = function ($scope, $modalInstance, params) {
$scope.params = params;
$scope.conf = [];
$scope.ok = function () {
console.log($scope.conf);
$modalInstance.close($scope.conf);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};

1
2
3
4
5
6
7
8
9
10
11
12

问题描述

因为

ng-model

是

ng-repeat

动态生成的，

ng-model

=”变量”，什么变量，是未知的，所以你无法在

$scope."变量"

取到值，就算取到值也是其中一个值，这个问题困扰了我一天，终于解决了。

解决方法

首先

ng-model

设置为

$parent.conf[$index]

:
用

$parent

的原因是

ng-repeat

产生的，他会为每一个

input

生成一个子

scope

对象，而

$parent

表示用父类的

scope

，这样我们在

JS

文件中才能取到该值。

$index

代表的意思是

ng-repeat="param
in params"

遍历时的下标

conf

是我们在

js

中的变量名

我们在

controller

中定义了一个

$scope.conf =
[];

就是一个数组，刚好通过上面的代码，为该数组添加了元素，然后我们通过

scope.conf

刚好把

ng-model

的所有元素自动保存了。

实际效果