AngularJS todo示例在从数组中推送/移除后删除行

Question

我有两个独立的容器：一个用于未完成的任务，另一个用于已完成的任务。

<li ng-repeat="(key, task) in requirements.tasks.outstanding track by $index">
    <span class="handle"> <label class="checkbox">
            <input type="checkbox" name="checkbox-inline" ng-model="completionOutstanding" ng-checked="task.completed" ng-change="taskChange(task, key)">
            <i></i> </label> </span>
    <p>
        {{task.name}} <br />
        <span class="text-muted">{{task.description}}</span>
        <span class="date">{{task.date_entered}}</span>
    </p>
</li>

已完成任务的Angular增强标记：

<li class="complete" ng-repeat="(key, task) in requirements.tasks.completed track by $index">
    <span class="handle"> <label class="checkbox">
            <input type="checkbox" name="checkbox-inline" ng-model="completionCompleted" ng-checked="task.completed" ng-change="taskChange(task, key)">
            <i></i> </label> </span>
    <p>
        {{task.name}} <br />
        <span class="text-muted">{{task.description}} </span>
        <span class="date">{{task.date_entered}}</span>
    </p>
</li>

使用的角度控制器taskChange功能：

$scope.taskChange = function(task, key) {
    if(task.completed == false) {
        task.completed = true;
        $scope.requirements.tasks.completed.push(task);
        delete $scope.requirements.tasks.outstanding[key];
    } else {
        task.completed = false;
        $scope.requirements.tasks.outstanding.push(task);
        delete $scope.requirements.tasks.completed[key];
    }

}

该功能正常工作，但实际视图中的行仍然存在。应该删除该行和数据，但在测试时，该行仍保留在那里。当我添加/删除任务时，会累积许多行。

在添加/删除数据时，如何添加和删除列表中的HTML行？

JSON架构：

{
  "tasks": {
    "outstanding":[
     {}, {}, {}, {}
     ],
    "completed":[
     {}, {}, {}, {}
     ]
  }
}

Answer 1

您混淆了代码中的数组和对象：

对于对象使用：

<!-- repeat attr -->
ng-repeat="(key, value) in items"
// add an item
items[key] = value;
// remove an item
delete items[key];

对于阵列：

<!-- repeat attr -->
ng-repeat="item in items"
// add an item
items.push(item);
// remove an item
items.slice(items.indexOf(item), 1);

Answer 2

我认为问题是您正在使用delete从旧列表中删除项，这不会删除数组中项的"slot"，只是将其设置为未定义例如[a，b，c]，删除b后，它变成[a，undefined，c]

您可能需要尝试拼接以从阵列中删除项目