ng-change 后的角度重置复选框答案

【问题标题】：angular reset checkbox after ng-changeng-change 后的角度重置复选框
【发布时间】：2018-12-24 10:08:21
【问题描述】：

探索 Angular，我建立了一个简单的待办事项列表。

我的问题是，当我使用复选框删除一个项目时，比如最后一个项目，该项目被删除，但它上面的复选框变为“选中”。我只想能够通过复选框删除该项目，而所有其他复选框将保持未选中状态。我想不出这里的错误。模糊地，我在想我需要重置“检查”变量，但这不起作用。

angular.module('ToDo', [])
.controller('ToDoController', function ($scope, ToDoService) {
    $scope.items = ToDoService.items;
    $scope.checked = false;

    $scope.add = function() {
        ToDoService.add($scope.todo);
    };

    $scope.deleteItem = function() {
        ToDoService.deleteItem();
    };

    $scope.remove = function(idx) {
        this.items.splice(idx, 1);
        console.log("test inside remove");
        return this.items;
    };
})
.factory('ToDoService', function () {
    return {
        items: [],
        add: function(todo) {
            this.items.push({todo: todo, time: new Date()});
        },
        deleteItem: function(idx) {
            this.items.splice(idx, 1);
            console.log("test inside deleteItem");

        }
    };
});

<html ng-app='ToDo'>
  <head>
    <title>My Angular To-Do App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src='app.js'></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="app.css">
  </head>
  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">My Angular To-Do App</a>
        </div>
      </div>
    </nav>

    <div class="container todos" ng-controller='ToDoController'>

      <div class="starter-template">
          <h1>My To-Do's</h1>
        
          <div class="alert alert-info" role="alert" ng-show="!items.length">
              No to-do items have been added yet.
          </div>

          <ul>
              <li ng-repeat='item in items'>{{item.todo}} - {{item.time}} <a class="btn" ng-click="remove()">Delete</a>
              <input type="checkbox" ng-model="checked" ng-change="deleteItem(checked)" >
              </li>
          </ul>

          <form class="form-inline">
              <input type='text' ng-model='todo' class="form-control" />
              <button ng-click='add()' class="btn btn-default">Add</button>
          </form>
      </div>

    </div>

  </body>
</html>

【问题讨论】：

为什么要使用 $scope.checked，如果你想在检查时删除

标签： javascript angularjs checkbox

【解决方案1】：

您的应用程序已复杂化，此处无需使用工厂。另一件事 - 你的 ng-repeat 函数没有设置 id 的添加待办事项 - 每次点击 delete 或 checkbox 时，你总是删除第一个元素。

ng-repeat='(id, item) in items'

最后 - 我添加了一个新功能。每次提交待办事项时，待办事项输入都会被清除。

$scope.todo = null;

Codepen

【讨论】：

@OmahaJoe 很高兴。如果需要，您可以投票/标记答案（：
我尝试过投票，但从我的角度来看，这表明我做到了，但因为我的代表点数少于 15：“感谢您的反馈！声望少于 15 人的投票已记录在案，但不要更改公开显示的帖子分数。” :(

【解决方案2】：

您的应用程序中存在多个错误。在您的情况下，当您的复选框更改布尔状态时，您正在调用没有任何参数的 ToDoService.deleteItem。所以，基本上你正在做一个this.items.splice(undefined, 1);，它删除了第一个元素（实际上你的代码笔中发生了什么）。

您应该更改服务和控制器中的 deleteItem 方法的签名以获取待办事项的名称。然后，您只需搜索它并将其从列表中删除。

.factory('ToDoService', function() {
    return {
        ....
        deleteItem: function(itemStr) {
            delete this.items[this.items.findIndexOf(function(item) {
                return item ==== itemStr;
            })];
        },
    }
})

然后在您的模板中，您应该使用当前待办事项调用 remove

ng-change="remove(item.todo)"

使用 Kind User 回答更简单，因为你有你的组件的直接索引，

.factory('ToDoService', function() {
    return {
        ....
        deleteItem: function(idx) {
            delete this.items[idx];
        },
    }
})

【讨论】：