更新：

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）在beginPhase（angular.js：14823）在Scope。$ get.Scope。$ apply（angular.js：14567）在app.js：218 在Scope。$ get.Scope。$ emit（angular.js：14715）在app.js：264 at 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;
      }
    });
});

删除todos无法正常工作

更新：

1 个答案: