1

HEREのチュートリアルを「Controller As」構文に変換して、よりクリーンなコードを作成する方法を学ぼうとしていますが、完了した「ToDo」を削除する最後のステップで立ち往生しています。これを除いて、チュートリアルの他のすべてが機能します。 Clear Completed をクリックしても何も起こりません。誰かが私が間違っているところを打ち破ることができれば、それは大歓迎です.

Plunker を求められたので、ここに作成し ました。まったく機能しませんが、コードが見やすくなると思います。

関連する 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
        }
    ];
})();
4

2 に答える 2

1

問題は、 todosData をフィルターから返された新しいコレクションに完全に置き換えていることです。ただし、コントローラーがインスタンス化されるときに、一度だけ vm.data を todosData に設定します。

個人的には、変数 todosData をどこからでも削除し、現在 todosData を使用しているすべての場所で vm.data を使用します。ただし、clearCompleted() の最後の行として vm.data を todosData に設定することもできます。

于 2016-12-04T03:40:10.103 に答える
0

問題は、フィルターの結果を vm.data に割り当てないクリア完了にあると思います。これは機能しますか？

function clearCompleted(){
  vm.data = vm.data.filter(function(item){
    return !item.done;
  });
}
于 2016-12-04T03:39:12.410 に答える