关于AngularJs的ng-repeat问题

本文探讨了Angular中ng-repeat指令无法正确处理列表中重复项的问题,并提供了解决方案。通过添加track by $index或自定义标识符,确保每个元素唯一,从而实现正确渲染。

大家在学习angular的时候,肯定会被其内置的很多ng所吸引吧,比如ng-if可以让某个元素添加或者删除,ng-hideng-show则可以来修改元素的显示和隐藏。


当然,本次讲的并不是讲ng如何如何的好,而是一个小问题。举个例子:

一个列表显示各个评委的打分情况:

html:

<ul>
<li ng-repeat="score in scores">{{score}}<li>
<ul>

js:

$scope.scores=[95,96,95,98]

结果呢?并没有输出来,原因何在呢?因为ng-repeat并不能输出重复项。
那么问题来了:

ng-repeat既然不能输出有重复项,那遇到这种输出分数的时候该怎么办?

还好官方早就发现了这个问题,输出的时候只要加上

<li ng-repeat="score in scores track by $index">

但是这样也是有点问题的,毕竟是官方自己生成的index,如果是存粹要输出的话,并没有什么问题。不过呢,要是大家想要进行操作的话,还是使用自己定义一个index吧。比如:

<li ng-repeat="score in scores track by score.id"><li>

用那种方法,还是取决于自己的使用场景吧~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值