解决ng-repeat循环数组中有同样的数据挂掉情况

weixin_30849403

于 2017-03-29 16:50:00 发布

阅读量85

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/qiudongjie/p/6640562.html

本文介绍了一个AngularJS应用中如何使用track by指令优化列表渲染的问题，特别是在处理包含重复数据的数组时，通过添加track by $index避免了直接遍历可能带来的性能问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en" ng-app="filter">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angular.min.js"></script>
</head>
<body ng-controller="con1">
    <ul>
        <li ng-repeat="i in arr">{{i|number:'2'|ZH}}</li>
    </ul>
    <script>
        var app = angular.module('filter', []);
        app.filter('ZH',function () {
            return function (money) {
                return '￥'+money;
            }
        })
        app.controller('con1',function ($scope) {
            $scope.arr = [5.2,5,7.9,3,5.2];
        });
    </script>
</body>
</html>

$scope.arr = [5.2,5,7.9,3,5.2];这个数组中有两条同样的数据，如果直接遍历的话就会挂掉。
解决方法：

<li ng-repeat="i in arr track by $index">{{i|number:'2'|ZH}}</li>

转载于:https://www.cnblogs.com/qiudongjie/p/6640562.html