5

私はいくつかのgoogle-fuを実行しましたが、AngularJSフィルターについて見つけることができるのは、単純なフィルターに関する単純な例です（主に単一のフィールドの値）。

私がthoguhを追いかけているのはやや複雑で、自分の状況に取り組む方法について助けを求めています。

次のJSONオブジェクトの配列があるとします。

{
    "id":"1",
    "title":"Title",
    "categories":[
        {"id":"14","name":"DIY"}
    ],
    "topics":[
        {"id":"12","name":"Junk Food"}
    ]
},
{
    "id":"2",
    "title":"Title 2",
    "categories":[
        {"id":"4","name":"Test"},
        {"id":"14","name":"DIY"},
    ],
    "topics":[
        {"id":"2","name":"Food"}
    ]
}

[...]

したがって、基本的に、各オブジェクトは任意の数の「カテゴリ」および/または「トピック」を持つことができます。

今の私の目標は、これらのJSONオブジェクトにさまざまな種類のフィルターを累積的に適用できるフロントエンドインターフェイスを作成することです。

たとえば、次のように言います。category.id= 14 AND topic.id = 2 [etc]であり、フィルタリングされた結果のディープリンクをサポートしているエントリのみを表示します。

だからここで私は立ち往生しています：

1）このためのルートを使用するための最良の方法は何ですか（つまり、（さまざまな値に基づいて）任意の数のフィルターをサポートするようにURLをどのように構造化するか）

2）追加されたフィルターをどのように追跡する必要がありますか？（つまり、ユーザーが選択したフィルターの数と種類）

AngularJSフィルターのドキュメントを見ると、フィルターパラメーターの2番目の例を明らかに使用します。

オブジェクト：パターンオブジェクトを使用して、配列に含まれるオブジェクトの特定のプロパティをフィルタリングできます。たとえば、{name： "M"、phone： "1"}述語は、プロパティ名に「M」が含まれ、プロパティphoneに「1」が含まれるアイテムの配列を返します。特別なプロパティ名$を使用して（{$： "text"}のように）、オブジェクトの任意のプロパティとの一致を受け入れることができます。これは、上記の文字列との単純な部分文字列の一致に相当します。

しかし、正しいフィールドをチェックしていることを確認する方法がよくわかりません（つまり、トピックの場合はtopic.id、カテゴリの場合はcategory.id）...

簡単に言えば、このような簡単ではないフィルタリングシナリオの例を見てみたいと思います。

4

2 に答える 2

3

代わりにこのようなものが必要だと思います。彼の「他の簡単な代替案」を参照してください。コントローラに挿入されたサービスで複雑なフィルタリングを行い、$scopeのフィルタリングされたリストをビューに公開します。私は比較的単純なタスクにのみAngularフィルターを使用します。

Re：これをURLで公開する方法についての質問です。これらのフィルターを文字列として表す方法が必要であり、$locationと$routeParamsを使用してコントローラーに入力できます。

于 2012-11-09T21:04:45.493 に答える
2

これは、カスタムフィルターを作成する場合に機能します。

var module = angular.module('app', []);

module.filter("property", ["$filter", function($filter){
    var parseString = function(input){
        return input.split(".");
    }

    function getValue(element, propertyArray) {
        var value = element;

        angular.forEach(propertyArray, function(property) {
            value = value[property];
        });

        return value;
    }

    return function (array, propertyString, target) {
        var properties = parseString(propertyString);

        return $filter('filter')(array, function(item){
            return getValue(item, properties) == target;
        });
    }
}]);

HTML部分は次のようになります。

<ul>        
    <li ng-repeat="data in items | property:'categories.id':<id_of_a_category_we_want>">
        {{ data }}
    </li>
</ul>

クレジット：OnOFF-Switchブログ

于 2014-09-05T11:46:16.530 に答える