删除待办事项无法正常工作

Question

当一个待办事项被创建时，我将它推送到这个数组中：

$scope.$on('todo:created',function(event,todo){
    $scope.model.todos.push(todo);
});

我正在尝试使用这样的$scope.$on 功能删除待办事项：

//from a child scope for the item
$scope.actions.remove = function remove()
{
    TodoService.delete($scope.model.todo);
    $scope.$emit('todo:deleted',$scope.model.todo);
};

//from a parent of the scope which has ng-repeat:

$scope.$on('todo:deleted',function(event,todo){
    for(var i =0;i<$scope.model.todos.length;i++)
    {
        if(todo._id === $scope.model.todos[i]._id)
        {
            console.log(i);
            $scope.model.todos.splice(i,1);
            break;
        }

    }
});

我发现这个看似正常的代码会导致很多问题：

1)last item gets deleted correctly
2)when deleting the penultimate item,the last item gets deleted
3)all other items are unresponsive on delete

我发现 UI 呈现时页面重新加载时删除了正确的项目。

我已尝试将代码更改为：

$scope.$on('todo:deleted',function(event,todo){
                 $scope.model.todos = $.grep($scope.model.todos, function (todoItem, i) {
                      if (todoItem._id === todo._id) {
                        console.log(i);
                        return false;
                      } else {
                        return true;
                      }
                    });
            });

完整代码可以在here on github找到

编辑：

我的代码像这样使用ng-repeat：

 <section class="ui three column doubling page grid">
   <div class="column" ng-repeat="todo in model.todos track by $index">
      <todo-item value="todo"></todo-item>
   </div>
</section>

更新：

我已尝试使用此代码完成删除：

  var onItemDeleted = function onItemDeleted(todo){
                var todos = $scope.model.todos;
                var checkIndex = function checkIndex(t){
                    return t._id !== todo._id;
                };
                todos = todos.filter(checkIndex);
                //$scope.model.todos = todos;
            };

            $scope.$on('todo:deleted',function(event,todo){
                $scope.$apply(onItemDeleted(todo));
            });

            var onTodoAdded = function onTodoAdded(todo){
                var todos = $scope.model.todos;
                todos.push(todo);
            };

            $scope.$on('todo:created',function(event,todo){
                $scope.$apply(onTodoAdded(todo));
            });

在这两种情况下，我都会收到错误：

错误：[$rootScope:inprog] $digest 已经在进行中 http://errors.angularjs.org/1.3.15/$rootScope/inprog?p0=%24digest 在 REGEX_STRING_REGEXP (angular.js:66) 在开始阶段（angular.js:14823） 在 Scope.$get.Scope.$apply (angular.js:14567) 在 app.js:218 在 Scope.$get.Scope.$emit (angular.js:14715) 在 app.js:264 在 processQueue (angular.js:13251) 在 angular.js:13267 在 Scope.$get.Scope.$eval (angular.js:14469) 在 Scope.$get.Scope.$digest (angular.js:14285)

我尝试通过替换服务中的数据来替换数据，如下所示：

  $scope.$on('todo:deleted',function(event,todo){
                var todosPromise = TodoService.get();
                todosPromise.then(function(data){
                    $scope.model.todos = data;
                });
            });

并且我已将事件代码更改为仅在删除操作完成后触发：

 $scope.actions.remove = function remove(id)
        {
            TodoService.deleteItem($scope.model.todo)
            .then(function(){
                $scope.$emit('todo:deleted',$scope.model.todo);
            })
            .catch(function(err){
                console.log(err,err.stack);
            });

        };

我发现从服务或者拼接时得到的数据是正确的，但是ng-repeat拉错了元素，是不是因为我用的是track by $index。

Answer 1

我在使用splice 时遇到了一些问题，并使用$grep 解决了这些问题。

你能试试下面的代码吗：

$scope.$on('todo:deleted',function(event, todo) {    
    $scope.model.todos = $.grep($scope.model.todos, function (todoItem, i) {
      if (todoItem._id === todo._id) {
        return false;
        console.log(i);
      } else {
        return true;
      }
    });
});