蔬菜土豆泥（@蔬菜土豆泥）

在接触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>