Question

我的复选框有一个奇怪的问题。它可能有一个简单的解决方案，因为我是Angular的新手，但是我试图在很多方面修复它并且我没有成功。

我试图以谷歌的方式做一个待办事项清单。问题是我有一个带有复选框的itens列表，当我检查其中一个时，我想从数组中删除该项，但是当我这样做时，列表中的下一个项目正在被检查。

我写的代码是：

＆＃13;

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

＆＃13;

<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>

＆＃13;

有一个例子无法奏效。添加以下任务： 1 2 3

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

抱歉，我无法使代码段工作，但代码就在那里。谢谢！

Answer 1

它发生了因为ng-checked总是正确的，你需要根据任务的完成字段更新它。

<强> DEMO

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: