在接触angualrjs不久的时候,我遇到一个问题,就是当我们用ng-repeat把数组迭代在一个div里面的时候,已经迭代在div中的数组dom不能够双向绑定到js上,代码的问题具体如下:
html代码
定义了一个ng-repeat的ng-model双向绑定输入框
<ul> <li ng-repeat="listVed in listVeds"> <div class="row"> <div class="col-xs-3"><input type="text" class="form-control" ng-model="listVed.lastName" placeholder="Employee No"></div> </div> </li> </ul>
js代码
var app = angular.module('myApp', ['ngAnimate']); app.controller('personCtrl', function($scope) { $scope.listVeds= [ {id:"10",firstName:"Brett1"}, {id:"21",firstName:"Brett2"}, {id:"30",firstName:"Brett2"}, {id:"44",firstName:"Brett2"}, {id:"59",firstName:"Brett2"} ]; })
上面的方法因为已经被遍历成dom元素,所以不能实现和ng的双向绑定
解决方法
使用“$index”进行遍历
ng的代码不变,只需要修改html内容
将
listVed.lastName
变为
listVeds[$index].lastName
注意:listVeds是数组 listVed是数组遍历后的孩子
具体代码如下
<ul> <li ng-repeat="listVed in listVeds"> <div class="row"> <div class="col-xs-3"><input type="text" class="form-control" ng-model="listVeds[$index].lastName" placeholder="Employee No"></div> </div> </li> </ul>
共有 0 条评论