ng：重复欺骗。在 ng-repeat 中获取重复数据答案

【问题标题】：ng:repeat dupes. Getting duplicate data in ng-repeatng：重复欺骗。在 ng-repeat 中获取重复数据
【发布时间】：2016-10-23 02:21:35
【问题描述】：

嘿，我的 Angular 应用程序在 dup 数据方面存在问题。我已将问题确定为精确的 ng-repeat，但我看不出它有什么问题。我收到一条错误消息，说我有重复的数据，但我看不到它是如何发生的，因为我的数据库中目前只有 4 个项目。我尝试了不同的事情，比如重命名等，但对我来说它看起来是正确的，所以我对为什么会收到错误感到有些困惑。我在想也许数据被加载了两次，但不确定如何加载？无论如何，我会发布相关代码，如果那里有一些有角度的上帝可以指出我的方式，我将永远感激不尽。

错误信息是： angular.min.js:84 错误：[ngRepeat:dupes] http://errors.angularjs.org/1.2.9/ngRepeat/dupes?p0=task%20in%20tasks%20track%20by%20task.id%20%7C%20filter%20%3A%20filterTask&p1=undefined

JavaScript

app.controller('tasksController', function ($scope, $http) {
    getTask(); // Load all available tasks 

    function getTask() {
        $http.post('ajax/getTask.php').success(function (data) {
            $scope.tasks = data;
        });
    }

    $scope.addTask = function (task) {
        $http.post('ajax/addTask.php?task=' + task).success(function (data) {
            getTask();
            $scope.taskInput = '';
        });
    };

    $scope.deleteTask = function (task) {
        if (confirm('Are you sure to delete this line?')) {
            $http.post('ajax/deleteTask.php?taskID=' + task).success(function (data) {
                getTask();
            });
        }
    };

    $scope.toggleStatus = function (item, status, task) {
        if (status == '2') {
            status = '0';
        } else {
            status = '2';
        }
        $http.post('ajax/updateTask.php?taskID=' + item + '&status=' + status).success(function (data) {
            getTask();
        });
    };
});

HTML：

<div class="task">
    <label class="checkbox" ng-repeat="task in tasks track by task.id | filter : filterTask">
        <input
            type="checkbox"
            value="{{task.STATUS}}"
            ng-checked="task.STATUS==2"
            ng-click="toggleStatus(task.ID,task.STATUS, task.TASK)"/>
        <span ng-class="{strike:task.STATUS==2}">{{task.TASK}} [{{task.ID}}]</span>
        <a ng-click="deleteTask(task.ID)" class="pull-right"><i class="glyphicon glyphicon-trash"></i></a>
    </label>
</div>

【问题讨论】：

可以添加错误信息吗？
当然............
试试track by $index

标签： javascript angularjs

【解决方案1】：

正如link in the error message 建议的那样，您可以使用track by 解决此问题：

<div ng-repeat="value in [4, 4] track by $index"></div>

【讨论】：

【解决方案2】：

您需要注意的事项很少。
1) 试试console.log($scope.tasks) 看看返回了什么。它可能会返回一些你没想到的东西。它应该是基于您的数据库的 4 个对象的数组，并且很可能该项目的 id 正在被复制。

2) 如果有重复的 id，尝试使用 $index 的 track 代替，因为它保证是唯一的。这应该可以解决您的错误消息问题。

3) track by 应该放在表达式的末尾，也就是 filter 之后。如果没有，您会注意到即使您在步骤 1 中成功删除了错误消息，也不会应用过滤器表达式。

您的代码应该可以使用 find 。

<label class="checkbox" ng-repeat="task in tasks | filter: filterTask track by $index">...</label>

【讨论】：