angularjs中使用ng-repeat需要注意的东西

angularjs 之ng-repeat

无可否认angularjs的崛起成为前端很大的福利，最近接到项目，框架便选中了angularjs。angularjs最吸引人的地方就是数据的双向绑定和指令了，需要了解和进阶的给大家介绍一个视频连接，http://www.imooc.com/learn/156。也可以到慕课网搜索angularjs教程，上面有大漠老师的教学视频，讲解的挺不错的。书归正传，来看看我碰到的奇葩问题。

1.ng-repeat 

我们通常都会有这样的需求，显示数据列表，这个在项目中是不可或缺的。通常在页面中

<tr ng-repeat="item in wlanList">
                  <td class="col-md-3" ng-click="showDetail(item)">
                                            <div class="self_adaptation_td" title="{{item.ssid}}">{{item.ssid}}</div>
                                        </td>
                                        <td class="col-md-3" ng-click="showDetail(item)">{{item.networkType}}</td>
                                        <td class="col-md-2" ng-click="showDetail(item)">{{item.enable | enableFilter}}</td>
                                        <td class="col-md-2">
                                            <a href="#" ng-click="showBlackList(item)">{{item.blacklistNum}}</a>
                                        </td>
                                        <td class="col-md-2">
	                                        <a class="glyphicon glyphicon-pencil" ng-click="showEdit(item)"></a>
	                                          
	                                        <a display-permission='Permission_Admin' class="glyphicon glyphicon-remove" ng-click="deleteWlan(item.ssid)"></a>
	                                          
                                            <a display-permission='Permission_Admin' ng-click="showWmm(item.ssid)">wmm</a>
                                        </td>
                                    </tr>

这样就可以输出真个列表了。在列表之上我们还需要其他的操作，比如，我针对一条数据进行修改，查看，删除等操作时，就需要为每一行遍历生成一系列的操作事件。

2.修改时的数据绑定问题

当我点击修改按钮时，给它绑定了一个ng-click事件，然后将选中的这条数据传到controller中做回显操作，只要把这条数据重新赋值给另一个对象$scope.user，那么在修改页面通过ng-model 就可以实现回显。这本身没啥问题，但我们同时用碰到了另一个指令ng-options.

angularjs中对select的使用时这么操作的，定义一个数组，把你所有的数据都使用数据封装起来，然后通过ng-options来实现，代码参见：

controller中定义一个select下拉菜单的数据：

$scope.networkTypeArray = [
            {
                id: "1",
                name: "Employee"
            }, {
                id: "2",
                name: "Voice"
            }, {
                id: "3",
                name: "Guest"
            },{
                id:"4",
                name:"Self-define"
            }];

html中就可以这样使用：

<select ng-change="editChangeNetwork()" style="width: 150px;" ng-model="networkTypeSelected" ng-options="obj.name for obj in networkTypeArray" ></select>

这select中我通过ng-model去绑定一个对象networkTypeSelected，其定义如下：

$scope.networkTypeSelected = {name:"",id:""};

显示效果如左侧，

可以通过$scope.networkTypeSelected = $scope.networkTypeArray[i]代码来说设置select选中值.

下面问题来了。当我手动操作下拉菜单的时候，再次点击选中的第二条数据，然后去设置select的选中值发现竟然设置不了了，始终是我手动操作下拉菜单的值。这就令我非常郁闷了。然后我就换个姿势，将点击事件放到其他地方，通过点击事件去改变select的选中值，发现，咦，居然好使。这我就郁闷了。换了好几个地方，才发现，问题出现在ng-repeat上，因为在ng-repeat之外的地方是可以通过一些触发事件去改变select中的值的。但是通过ng-repeat之内的事件是无法改变select的值的。按道理说我绑定的都是同一个model，应该都能改变啊。但恰恰是ng-repeat出现了问题。那么ng-repeat是怎么工作的呢？

3.ng-repeat的工作原理

查了一下资料，原来ng-repeat中遍历创建列表时，ng-repeat 里面输出的元素会有自己新的 scope, 也就是说这里的通过ng-model绑定的networkTypeSelected 的作用域已经发生了变化，你在通过ng-repeat中的修改时间去设置$scope.networkTypeSelected = $scope.networkTypeArray[i]，是无效的。聪明的人或许已经想到了使用rootscope来绑定networkTypeSelected，事实证明这样是可以的。但是，在angularjs中是不允许使用全部变量或者自定义全局变量的，这样会污染空间。就不符合angularjs的设计理念了。如果你定义的对象只是在自己模块中使用那么就尽量不使用rootscope，除了rootscope之外，angularjs认为作为数据共享的，应该使用它提供service来进行数据共享。而在这里明显是不需要的，除此之外还有个方法就是使用对象来去绑定model，怎么绑定呢?

如下：$scope.L = {networkTypeSelected:{name:"",id:""}}

而html使用 

<select ng-change="editChangeNetwork()" style="width: 150px;" ng-model="L.networkTypeSelected" ng-options="obj.name for obj in networkTypeArray" ></select>

这样他始终绑定的都是L对象下的 networkTypeSelected，就可以避免类似的问题了。

另外使用ng-model双向绑定的时候，建议去绑定他的对象属性比如ng-model="L.name"，而不是ng-model="name"，否则你会出现各种奇葩的问题。问题解决了，希望使用ng-repeat的时候注意一下这个问题。