web-dev-qa-db-ja.com

文字列の配列に基づくAngularJSフィルター？

発生している問題を解決するためにAngularフィルターを実行する方法について頭を悩ませています。

これが私のデータ構造の基本的な例、タスクの配列です：

_var tasks = [
    { Title: "This is a task title",
      Tags: ["Test","Tag","One","Two","Three"] },
    { Title: "Another test tag title",
      Tags: ["Some", "More", "Tags"] },
    { Title: "One more, why not",
      Tags: ["I","Like","Dirt"] },
    { Title: "Last one!",
      Tags: ["You","Like","Dirt"] }
];
_

したがって、各オブジェクトにはタグの配列があります。例として、これらの各オブジェクトをテーブルの行として出力しているとしましょう。

ページng-controllerが初期化されると、私はすべてのタスクからすべてのタグを取得（重複なしで）、それらをtags配列にアセンブルします。

次に、それらのタグをページ上の切り替え可能なボタンとして出力します。すべてのボタンはデフォルトで青色で、「アクティブ」を意味します（つまり、このタグが含まれているタスクを表示します）。これらのボタンの1つをクリックして、そのタグを「オフに切り替える」ことができる必要があります。これにより、タスクにそのタグが付いているテーブル内のタスク行がすべて除外されます。

視覚的な参照の場合と同様に、gray = "タグにこのタグが含まれているタスクを非表示にする"、blue = "タグにこのタグが含まれているタスクを表示する"：

So you'd see a big row of buttons like this。

ボタンをクリックすると灰色になり、そのタグを持つテーブル内のタスクが除外されます。次に、ボタンをもう一度クリックしてそのタグをオンに戻し、そのタグを持つすべてのタスクを再表示できます。

私はこれを十分に明確に説明していますか？それは紛らわしいシステムです。

とにかく、私は以下を試しました：

_ng-filter="task in filteredWithTags = (tasks | filter: { tags: arrayOfTags }"_は役に立たない。

誰かが私を正しい方向に向けてくれませんか？ :)

PS：コントローラーでfilterByTag(tag)関数を呼び出すことにより、今週初めにこれを機能させました。これにより、タスクの配列内のすべてのタスクがループされ、一致するタグがある場合は、そのタスクが非表示になります。同様に再アクティブ化タグは同じことを行い、全員をループして魔法を働かせます...しかし、「角度フィルターはすべてを処理できるため、私の方法は遅い+やり過ぎだと言われていますそれはあなたにとって、そしてそれはより最良の実践になるでしょう。」したがって、なぜ私がここにいるのか、Angularが私のために仕事をするようにする方法を理解しようとしています:)

どんな助けでも大歓迎です！

javascriptangularjsangularjs-directiveangularjs-ng-repeatng-show
9
user2275203

カスタム filter を書くことができます。フィルタには、アクティブなタグのリストtagsとフィルタリングするタスクの配列tasksが与えられ、フィルタリングされたタグの配列が出力されます。これは、すでに行ったこととほとんど同じですが、スコープに追加の機能はありません。

angular.module('myApp').filter('selectedTags', function() {
    return function(tasks, tags) {
        return tasks.filter(function(task) {

            for (var i in task.Tags) {
                if (tags.indexOf(task.Tags[i]) != -1) {
                    return true;
                }
            }
            return false;

        });
    };
});

その後、あなたはそれを次のように使用することができます

<ul>
    <li ng-repeat="task in tasks | selectedTags:tags"></li>
</ul>

これをチェックしてください フィドル 。

25
Mikke