0

todo mvc アプリケーションを angular で作成しようとしましたが、フィルタリングに行き詰まりました。私がフィルタリングしようとしているのは、完了/アクティブまたはすべてを表示する todo です。フィルター処理しようとしている isCompleted という変数があります。奇妙なことに、フィルタリングして完了を取得すると機能するように見えますが、アクティブを表示しようとすると、アクティブと完了の両方が表示されます。data-ng-repeat="todo in todos | filter: {isComplete: false}" を設定しようとしましたが、それでもすべての todo が表示されます。私が間違っていることについてのアイデアはありますか?

<section id="main" data-ng-cloak="">
<input type="checkbox" id="toggle-all" data-ng-model="toggleAll" data-ng-click="markAll(toggleAll)" />
<ul id="todo-list">
    <li data-ng-repeat="todo in todos | filter: selectFilter()" data-ng-class="{completed: todo.isCompleted}">
        <input type="checkbox" class="toggle" data-ng-model="todo.isCompleted" />
        <label>{{todo.title}}</label>
        <button class="destroy" data-ng-click="removeTodo(todo)"></button>
    </li>
</ul>


function TodosController($rootScope, $scope, $location) {

$scope.location = $location;
$scope.$watch('location.path()', function (path) {
    $scope.selectFilter = function () {
        if (path == '/active') {
            return { isCompleted: false };
        }
        else if (path == '/completed') {
            return { isCompleted: true };
        }
        else
        {
            return null;
        } 

    };
});

if (!$rootScope.todos) {
    $rootScope.todos = [{ title: "todo1", isCompleted: true }, { title: "todo3", isCompleted: true }, { title: "todo2", isCompleted: false }];
    //$rootScope.todos = [new Todo('Todo1', true), new Todo('Todo4', true), new Todo('Todo2', true), new Todo('Todo3', false)];
}
...
4

1 に答える 1

2

で<li>、追加

ng-show="toggleAll || todo.isCompleted"

これは、toggleAllがチェックされている場合、ショートカットを実行し、各項目isCompleteを返すことを意味します。trueがチェックされていない場合toggleAll、表示するかどうかは に依存しisCompleteます。

Demo on jsFiddle

于 2013-08-02T13:52:17.597 に答える