angularjs中使用ng-repeat的注意点

1、ng-的数据不能出现重复项问题
通常情况下,ng-的数据是不可以重复的,否则就会报错 。原因是需要一个唯一值可以与生成的dom绑定,以便追踪.
解决方案:


2、ng-的性能问题
的 ng- 让我们非常方便的遍历数组/对象来生成 Dom 元素,然后在使用过程中也需要注意性能问题 。
原理:在项目中我们使用 ng- 加载完一个列表后,如果再次请求数据,当 ng- 的数组被替换时, 它默认并不会重新利用已有的 Dom 元素,而是直接将其全部删除并重新生成新的数组 Dom 元素 。而频繁的操作dom显然是很不友好的 。为什么 ng- 不能利用已有的 dom 元素去更新数据呢?因为你没有把数组元素的标识属性告诉它,那么两次替换的时候它就没办法追踪了 。我们可以看到 ng- 往数组里每个元素加了一个 $$ 的属性:
这个 key 是由内部的 () 方法生成,类似数据库自增,但是是使用字符串 。
现在我们明白了,因为每次替换数组都会导致 ng- 为每个元素生成一个新 key, 所以根本没办法重用已有的 Dom 元素,那么我们可以使用下边的语法来避免这个问题:
// 使用 track by 标识
{{user.name}}

这样 ng- 就用将其缓存起来啦,当然可能你的数组元素没有一个标识属性,如果元素数量不多那么可以接受,不然还是建议你手动为其生成一个标识属性,类似于id 。
3、ng-遇到的问题
ng-的使用原理和ng- 是一致的,都可以很方便的遍历数组/对象 。先来看一组代码:
$scope.selectDatas = [{id: "1",name: "apple"}, {id: "2",name: "origin"}, {id: "3",name: "bananer"},{id:"4",name:"pear"}];
angularjs中使用ng-repeat的注意点

文章插图
html中展示:
这样就可以将下拉列表完美的展示出来了 。当我们想下拉列表默认选中一个时,代码如下:
$scope.selectDataSelected = {name:"pear",id:"4"};

此时,默认选中pear,非常完美!然而当我在去变换选择其他项时,会发现下拉列表始终展示的是我默认设置为显示的那一项,whati do?
原因:ng-指令为集合中的每项都实例化一个模块 。每个模块都有自己的scope,也就是说ng-model绑定的的作用域已经发生变化,你在通过ng-去设置 scope.= scope.[i],是无效的 。因为每一个$scope.都有自己的作用域 。
解决方案:
$scope.obj = {selectDataSelected :{name:"pear",id:"4"}}

这样他始终绑定的都是obj对象下的,就可以避免类似的问题了 。
另外使用ng-model双向绑定的时候,建议去绑定他的对象属性比如ng-model=”obj.name”,而不是ng-model=”name”,这样可避免出现此类问题 。
4、ng-如何在渲染完成后再去执行脚本
【angularjs中使用ng-repeat的注意点】