ng-repeat的使用

youhebuke225

于 2022-01-21 22:49:56 发布

阅读量778

点赞数

分类专栏： angularJS 文章标签： angular.js 前端 angular

本文链接：https://blog.csdn.net/youhebuke225/article/details/122630611

版权

angularJS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

作用

一般用于遍历数据生成模板，我们来看一个例子

实例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl">
      <h1>{{indexName}}</h1>
      <section>
          <div ng-repeat="_i in arr track by $index">序号:{{$index}} 内容:{{_i}}</div>
      </section>
    </div>

    <script>
      var app = angular.module("myApp", []);
      app.controller("myCtrl", function ($scope) {
        $scope.indexName = "主页";
        $scope.arr = [1,1,2,3,4,5] // 不加track by $index 就会报错 angular.js:14791 Error: [ngRepeat:dupes]
        /*
            如果当前数据有id的话，尽量使用track by _i.id
        */

      });
    </script>
  </body>
</html>

效果

对于代码的解释

加上track by $index是为了解决，数组中有重复属性是报错，如果当前的例子不加track by $index就会出现报错
上面的track by $index是为了标识每一个遍历标签的唯一性，但是为了后面更好的操作，我们最好使用唯一的表示，比如说id来进行

注意事项

$index并不是数组下标，当对于标签进行增删改的时候，我们并不能以$index为标识获取正确的标签
1. 比如将列表中第一个标签($index为1)和第二个标签($index为2)进行互换的时候，他们互换后，$index并不互换，所以现在第一个$index为2
2. 所以，一般推荐track by _i.id
当数组中为基本变量类型的时候，必须加上track by，引用变量的时候可以不用，但是最好加上

youhebuke225

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ng-repeat的使用

作用一般用于遍历数据生成模板，我们来看一个例子实例<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.6.8/angular.min.js"></script> </head> <body>
复制链接

扫一扫