Angular - 使用 "Controller As" 语法过滤和删除

Question

我正在尝试通过将 HERE 中的教程转换为 "Controller As" 语法来学习如何编写更清晰的代码，但我卡在了最后一步，他删除了 completed "ToDos"。除了这个，教程中的其他所有内容都有效，当我单击“清除已完成”时没有任何反应。如果有人能解决我出错的地方，将不胜感激。

需要一个 Plunker，所以我创建了一个 HERE 它根本不起作用，但我想它会让我的代码更容易看到。

相关HTML:

    <div ng-controller="listController as list" class="app-container">
        <form name="list.form" ng-submit="list.addTodo()">
            <input type="text" ng-model="list.model.newTodo" name="newTodo" required />
            <button class="button success" ng-disabled="frm.$invalid">Go</button>
        </form>
        <button class="button" ng-click="list.clearCompleted()">Clear Completed</button>
        <ul>
            <li ng-repeat="todo in list.data">
                <input type="checkbox" ng-model="todo.done" />
                <span ng-class="{'done':todo.done}">{{todo.title}}</span>
            </li>
        </ul>
    </div>

我所有的JS：

(function(){

angular
    .module('ToDo')
    .controller('listController', ListController);

    function ListController(){
        var vm = this;
        vm.data = todosData;
        vm.addTodo = addTodo;
        vm.clearCompleted = clearCompleted;

        function addTodo(){
            todosData.push({'title': vm.model.newTodo, 'done': false});
            vm.model.newTodo = '';
        }

        function clearCompleted(){
            todosData = todosData.filter(function(item){
                return !item.done;
            });
        }
    }

    var todosData = [
        {
            'title':'Build a todo app',
            'done':false
        }
    ];
})();

Answer 1

我猜问题出在 clear completed 没有将过滤器的结果分配回 vm.data。这个有用吗？

function clearCompleted(){
  vm.data = vm.data.filter(function(item){
    return !item.done;
  });
}

Answer 2

问题是您将 todosData 完全替换为从过滤器返回的新集合。但是当控制器被实例化时，你只将 vm.data 设置为 todosData 一次。

我个人会在所有地方删除变量 todosData 并在您现在使用 todosData 的任何地方使用 vm.data。但是您也可以将 vm.data 设置为 todosData 作为 clearCompleted().

的最后一行

Angular - 使用 "Controller As" 语法过滤和删除

Angular - Filter and Delete with "Controller As" Syntax

angularjs

angularjs-controlleras