Question

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

Answer 1

您的应用程序很复杂，这里不需要使用工厂。另一件事 - 您的ng-repeat函数没有设置id添加的待办事项 - 每次点击delete时，您都会删除第一个元素在checkbox。

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

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

$scope.todo = null;

<强> Codepen

Answer 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;
            })];
        },
    }
})

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

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

使用Kind用户答案更简单，因为您拥有组件的直接索引，

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

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

2 个答案: