为什么不't AngularJS希望在值重复的情况下列出数组项
Why doesn't AngularJS want to list array items if a value repeats?
当我试图从数据库中列出一些东西时,我花了很长时间调试故障所在。事实证明,如果数组中有重复的值,Angular将拒绝在ng repeat中使用该数组。
示例如下:http://jsfiddle.net/2uyxu7ha/
Javascript:
var app = angular.module("Module", []);
app.controller("Controller", function($scope){
$scope.array1 = ["1", "2", "3", "4"];
$scope.array2 = ["1", "1", "3", "4"];
});
HTML:
<div ng-app="Module">
<div ng-controller="Controller as ctrl">
<ul>
<li ng-repeat="item in array1">{{item}}</li>
</ul>
<ul>
<li ng-repeat="item in array2">{{item}}</li>
</ul>
</div>
</div>
正如您将注意到的,第二个数组中只有一个值重复,因此不会显示整个列表。如果您只是将第二个值更改为"2",它就会显示出来。
我不想要这种行为,因为即使数据库中有一些重复的值,我仍然希望在前端看到它们。为什么会发生这种情况,我该如何解决?
对于这种情况,您需要track by $index
http://jsfiddle.net/2uyxu7ha/1/
文档解释:
https://docs.angularjs.org/error/ngRepeat/dupes
您需要在ng重复结束时使用track by $index
由于您使用的是ControllerAs语法,您可以使用此语法在控制器中引用$scope,而在HTML中,您只需要确保引用正确的数组。
参见更新的小提琴:
[http://jsfiddle.net/jaykan24/2uyxu7ha/2/][1]
现在,您不必担心重复ngRepeat问题。希望这能帮助
相关文章:
- 如何在不使用ajax的情况下将pair值添加到数组并发送到django中的视图
- 在不使用循环的情况下,从一个数据库字符串值向javascript数组添加多个对象
- 如何仅在数组没有的情况下追加到数组't包含带有rethinkDB的值
- 如何在不链接/jquery的情况下使用方法应用css属性数组
- JavaScript-在不影响索引的情况下将元素插入数组
- 在知道对象值的情况下,确定数组中JS对象的索引
- 如何在不使用jQuery的情况下设置数组以获取单选按钮值
- 在不重构Mongo数据库的情况下,更新嵌入数组中的具有给定ID的对象
- 如何在不赋值数组变量的情况下读取数组数据
- handontable:在不更改数据数组/对象的情况下隐藏某些列
- 在不更改顺序的情况下对数组进行排序
- 如何在不完成添加序列的情况下从rxjs创建数组
- Javascript在不知道所有键的情况下访问多维数组
- 如何在不创建数组的情况下使用NgFor来生成矩阵UI模式
- 如何在Angular中设置异步HTTP服务的回调,以便在不定义数组的情况下在控制器中填充数组
- 在不触发弹出过滤器的情况下打开数组中的链接
- 如何在不选择模式配置参数的情况下,使用mongoose在MongoDB模式实例化中的关联数组/对象中执行foreach
- 在不重绘内容的情况下对数组进行排序
- 在不更改 A 引用的情况下执行数组 A = 数组 B 的最快方法
- 你能在没有循环的情况下对数组中的两个或多个特定元素使用算术运算吗