ng-repeat, for-loop and push (循环, for循环和推送)

12 浏览
0 Comments

ng-repeat, for-loop and push (循环, for循环和推送)

我快要疯了。这个类似于hello-world的例子有什么问题？我只是想测试一些关于angularjs 1.5.5的基础知识。\nHTML:\n

     
测试1：

     {{label}}
     
测试2：

     {{label}}

\nJS:\n

angular.module('myApp', [])
    .controller('Ctrl', ['$scope', function ($scope) {
    $scope.test = function(amount) {
      var result = [];
      result.push("1");
      for (var i = 0; i < amount; i++) {
        result.push("2");
      }
      result.push("3");
      return result;
    }    
}]);

\nJsFiddle: http://jsfiddle.net/d3v6vq7w/7/\n简而言之，循环在迭代1次时正常工作，但是例如迭代2次时不工作。没有任何输出。是什么原因？

0

3 答案

0 Comments

ng-repeat、for-loop和push是常见的在AngularJS中使用的方法，用于在页面中循环展示数据或添加新元素。然而，有时候在使用这些方法时会遇到问题，即重复元素的出现。

出现这个问题的原因是在ng-repeat或for-loop中，重复的元素是不被允许的。当使用这些方法时，如果数据中存在重复的元素，就会导致出现错误。为了解决这个问题，我们可以使用'track by'表达式。

在上述示例中，test2返回的数组[1,2,2,3]中存在重复的元素2。这个问题可以通过使用track by $index来解决。这样，ng-repeat或for-loop会根据元素在数组中的索引进行追踪，而不是根据元素的值。

具体的解决方法可以参考AngularJS官方文档：https://docs.angularjs.org/error/ngRepeat/dupes

在代码中，可以按照以下方式使用track by $index来解决重复元素的问题：


  {{item}}

通过使用track by $index，我们可以确保ng-repeat或for-loop能够正确地处理重复元素的情况，从而避免出现错误。

0
0 Comments

ng-repeat, for-loop and push问题的出现的原因是重复的键值。在AngularJS中，重复的键值是被禁止的，因为它使用键值来将DOM节点与项目关联起来。当重复的键值出现时，就会发生错误。

解决这个问题的方法是使用"track by"表达式来指定唯一的键值。"track by"表达式可以是任何能够生成唯一值的表达式，例如对象的属性或者是一个函数。

下面是解决这个问题的示例代码：


  {{item.name}}

在上面的示例中，我们使用"track by"表达式指定了一个唯一的键值，即`item.id`。这样就确保了在重复的情况下不会发生错误。

要注意的是，"track by"表达式应该选择一个能够唯一标识每个项目的属性或值。这样可以确保在列表中的项目发生变化时，AngularJS能够正确地更新DOM。

希望通过上述方法可以解决ng-repeat, for-loop and push问题，避免重复的键值出现，从而确保AngularJS应用程序的正常运行。

0
0 Comments

问题出现的原因是数组中存在重复的元素。解决方法是在ng-repeat中添加track by $index。

解决方法的代码示例如下：

<span ng-repeat="label in test(2) track by $index">{{label}}</span>

具体问题的解决代码可以在以下链接中查看：

Fiddle - http://jsfiddle.net/ayay0d6u/

0