通过使用带有$ index的角度ng-repeat，数据无法反映出来

Question

当数据来自数据库时，DOM没有反映出来。 当页面加载我在productList数组中有一些数据并且应用了一些过滤器（比如价格应该在500-1000之间）之后，请求转到API并且更新的productList来自响应。但产品没有反映在页面上。

我将数据发送到一个指令，该指令显示了产品列表与ng-repeat的单独产品，我的代码如下：

<div ng-repeat="product in productList track by $index">

 

Answer 1

我发现当我们从作用域传出数据时，$ index会导致问题。因此数据丢失和DOM无法更新。

我通过使用product.id作为ng-repeat中的键来找到解决方案，如下所示：

<div ng-repeat="product in productList track by product.id">

 

但是当多个产品带有相同的id时，上面的代码再次失败并抛出以下错误，因为如果产品带有相同的id ng-repeat，则将这些产品视为相同：

angular.js：11706错误：[ngRepeat：dupes]不允许在转发器中重复。使用'track by'表达式指定唯一键。中继器

所以最后我通过制作ng-repeat的动态唯一键来解决问题，如下所示：

<div ng-repeat="product in productList track by (product.id + $index)">

 

Answer 2

只需在div

中添加ng-if即可

<div ng-if="productList" ng-repeat="product in productList track by $index">