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>

使用Angular Controller 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

我认为问题是你使用删除从旧列表中删除项目，这不会删除＆＃34;插槽＆＃34;数组中的项目，只需将其设置为undefined 例如[a，b，c]，删除b后，变为[a，undefined，c]

您可能想尝试拼接以从数组中删除项目

Answer 2

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

对象使用：

<!-- 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);

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

2 个答案: