从阵列中删除后取消选中复选框

Question

我的复选框有一个奇怪的问题。它可能有一个简单的解决方案，因为我是 Angular 的新手，但我尝试以多种方式修复它，但没有成功。

我正在尝试按照 Google 的方式列出待办事项。 问题是我有一个带有复选框的项目列表，当我选中其中一个时，我想从数组中删除该项目，但是当我这样做时，正在检查列表中的下一个项目。

有我写的代码：

var app = angular.module('todoApp', []); 
app.controller('todoCtrl', function($scope) {
    $scope.todoList = [];
    $scope.doneList = [];

    $scope.todoAdd = function() {
        $scope.todoList.push({text:$scope.todoInput, done:false});
        $scope.todoInput = "";
    };

    $scope.markAsDone = function() {
        var task = $scope.todoList[this.$index];
        task.done = true;
        $scope.doneList.push(task);
        $scope.todoList.splice(this.$index, 1);
    };

    $scope.markAsTodo = function () {
        var task = $scope.doneList[this.$index];
        task.done = false;
        $scope.todoList.push(task);
        $scope.doneList.splice(this.$index, 1);
    };
    
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul class="list-group" ng-repeat="task in todoList track by $index">
  <div class="input-group">
    <div class="input-group-addon">
      <input type="checkbox" aria-label="Done" ng-checked="checked" ng-click="markAsDone()">
    </div>
    <input type="text" class="form-control" value="{{task.text}}">
    <button class="btn btn-danger btn-sm">Delete</button>
  </div>
</ul>
<form class="form-group" ng-submit="todoAdd()">
  <div class="input-group">
    <input class="form-control" type="text" ng-model="todoInput" placeholder="New Task" autofocus>
    <button class="btn btn-primary btn-sm" type="submit">Add</button>
  </div>
</form>

有一个例子不起作用。添加这些任务： 1 2 3

在将 2 标记为完成后，将删除 2，但将检查 3。总是会检查下一个。

抱歉，我无法使 sn-p 工作，但代码在那里。 谢谢！

Answer 1

之所以会这样，是因为 ng-checked 始终为 true，您需要根据任务的 done 字段对其进行更新。

DEMO

var app = angular.module('todoApp', []); 
app.controller('todoCtrl', function($scope) {
    $scope.todoList = [];
    $scope.doneList = [];

    $scope.todoAdd = function() {
        $scope.todoList.push({text:$scope.todoInput, done:false});
        $scope.todoInput = "";
    };

    $scope.markAsDone = function(task) {
        task.done = false;
        $scope.doneList.push(task);
        $scope.todoList.splice(this.$index, 1);
    };

    $scope.markAsTodo = function () {
        var task = $scope.doneList[this.$index];
        task.done = false;
        $scope.todoList.push(task);
        $scope.doneList.splice(this.$index, 1);
    };
    
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="todoApp" ng-controller="todoCtrl"> 
<ul class="list-group" ng-repeat="task in todoList track by $index">
  <div class="input-group">
    <div class="input-group-addon">
      <input nng-checked="!task.done" type="checkbox" aria-label="Done"  ng-click="markAsDone(task)">
    </div>
    <input type="text" class="form-control" value="{{task.text}}">
    <button class="btn btn-danger btn-sm">Delete</button>
    {{variable}}
  </div>
</ul>
<form class="form-group" ng-submit="todoAdd()">
  <div class="input-group">
    <input class="form-control" type="text" ng-model="todoInput" placeholder="New Task" autofocus>
    <button class="btn btn-primary btn-sm" type="submit">Add</button>
  </div>
</form>
</div>