问题描述:
最近在项目中确实遇到这样的问题,在ng-reapet中如何为ng-model双向绑定呢?因为ng-model是ng-repeat动态生成的,ng-model=”变量”,什么变量,是未知的所以你无法在$scope."变量"取到值,就算取到值也是其中一个值,对ng-repeat下的每一循环绑定的值都会相互污染。确实挺奇怪的。
解决方案:
首先ng-model设置为$parent.students[$index],这样设置的目的:
1、用$parent的原因是ng-repeat产生的,他会为每一个input生成一个子scope对象,而使用$parent可用父类的scope,这样就可以在controller中中才能取到该值,并绑定在ng-modal上。
2、$index代表的意思是ng-repeat="item in students"遍历时的下标
3、students是父类controller中变量名实际效果
在controller中定义了一个$scope.students= [];就是一个数组,刚好通过上面的代码,为该数组添加了元素,然后我们通过scope.students刚好把ng-model的所有元素自动保存了。
实际用例:
html模板:
<button ng-click="add()">Add</button>
<div class="testClass">
<div ng-repeat="item in students">
<!-- <span>{{item.username + $index}}</span> -->
<select ng-model="$parent.students[$index].username">
<option ng-repeat="x in testData" value="{{x.name}}" ng-selected="item.username == x.name">{{x.name }}</option>
</select>
<span ng-click="delete($index)">X</span>
</div>
</div>
<pre>
{{
students |json
}}
</pre>
controller:
$scope.testData = [{ id: 1, name: 'testName1' },
{ id: 0, name: 'testName2' }
, { id: 2, name: 'testName3' }
, { id: 3, name: 'testName4' }
, { id: 4, name: 'testName5' }
, { id: 5, name: 'testName6' }];
$scope.students = [];
$scope.add = function () {
$scope.students.push({ username: '', sex: "", age: "" }); //这里必须向数组中push对象数据模型,不可先定义对象,再push相应变量
}
$scope.delete = function (idx) {
$scope.students.splice(idx - 1, 1);
}
效果图: