指定されたプロパティを持たないAngularJSネストされたフィルタ隠蔽要素

Question

私はプロジェクトでAngularJSを使用しています。ネストされたプロパティのフィルタを持つ選択ボックスを実装する必要があります。私のオブジェクト（私はそれらと私はNGリピートを経由して、それらを反復てるの配列を持っている）これと同様の構造を有する：

{ 
    id: 1, 
    name: 'Example', 
    groups: [ 
    { id: 1, name: 'Group 1' }, 
    { id: 2, name: 'Group 2' } 
    ] 
} 

を私は要素のグループIDをフィルタリングする必要がある、と私を検索した後これらの問題がある

1.

| filter: { $: { id: search.item_id } } 

：

どうやらそれはIDという名前のネストされたプロパティを検索し、私ヘクタール場合は、「それを行うには、2つの方法を考え出すまし私の主なオブジェクトの中に複数のオブジェクトがあり、IDというプロパティもあります。それはフィルタにそれを追加します。例：

{ 
    id: 2, 
    name: 'Example 2', 
    groups: [ 
    { id: 1, name: 'Group 1' }, 
    { id: 2, name: 'Group 2' } 
    ], 
    categories: [ 
    { id: 1, name: 'Cat 1' }, 
    { id: 2, name: 'Cat 2' } 
    ] 
} 

ID 1のフィルタリングはID 1のグループだけでなく、ID 1のカテゴリも選択します。

また、フィルタを設定する前（search.item_idモデルがnull）でも、グループのないオブジェクトはフィルタリングされていて、リストには表示されません。これらのオブジェクトは、このようなものです：

{ 
    id: 3, 
    name: 'Example 3', 
    groups: [] 
} 

および他の方法がある。この場合、

2.

| filter: { groups: [{ id: search.item_id }] } 

、問題は、それが単に動作しないということです、それはすべてのものをフィルタリングそれが設定されているかどうか、またはどのオプションが選択されていても、リストは空白のままです。

どうすればいいですか？私は検索してきましたが、これについて何も見つかりませんでした。ネストされたプロパティをフィルタリングすることは、非常に基本的なことです。

---

更新：

ので、XTX最初のソリューションは、ちょっと私は入力テキストまたは番号を使用しますが、私は、選択ボックスを使用する必要がある場合にのみ、それをしなかった（具体的にUIB-ドロップダウンしかし、通常の選択で作業することは次のステップです）。私の選択ボックスは次のようになります：

<select name="filter_classes_groups_test" ng-model="search.group_id"> 
    <option val="group.id" ng-repeat="group in classesGroups">{{ group.name }}</option> 
</select> 

私はそれと対話しても何も起こりません。

Answer 1

カスタムフィルタを作成するここで、あなたのために働く場合は、あなたがそれを行うことができる方法である。

app.filter('groupsFilter', function() { 
    return function(input, groupId) { 
    var out = []; 

    if (!groupId || isNaN(parseInt(groupId))) { 
     return input; 
    } 
    angular.forEach(input, function(item) { 
     if (item.groups && angular.isArray(item.groups)) { 
     angular.forEach(item.groups, function (group) { 
      if (group.id === parseInt(groupId)) { 
      out.push(item); 
      } 
     }); 
     } 
    }); 
    return out; 
    } 
}); 

あなたが見ることができるように、カスタムフィルタが名前groupsFilterを持ち、パラメータとして検索するためにグループIDを取ります。フィルタは次のように適用することができます。

<div ng-repeat="item in data | groupsFilter:search.item_id"> 
    ... 
</div> 

---

UPDATE：

代わりにカスタムフィルタを作成する、あなただけのこのような範囲では、フィルタリングロジックを実装する関数を作成することができます。

$scope.groupsFilterLocal = function(value) { 
    if (!$scope.search.item_id || isNaN(parseInt($scope.search.item_id))) { 
    return true; 
    } 
    if (!value || !value.groups || !angular.isArray(value.groups)) { 
    return false; 
    } 
    for (var i = 0; i < value.groups.length; i++) { 
    if (value.groups[i].id === parseInt($scope.search.item_id)) { 
     return true; 
    } 
    } 
    return false; 
}; 

し、このようにビルドにフィルタ使用してそれを適用します。

この場合、上記のカスタムフィルタgroupsFilterの場合と同様に、（search.item_id）を検索するための値を関数groupsFilterLocalに渡すことはできません。作成方法の選択は適切

あなたがドロップダウンにグループを選ぶ際にフィルタが適用されていない理由は、である：だからgroupsFilterLocalは直接

---

UPDATE 2はsearch.item_idにアクセスする必要がありますあなたが選択をどのように定義したか。選択されたグループのIDの代わりに、search.group_idは割り当てられたグループの名前を取得します。 、以下に示すような選択を定義してみてください。

<select name="filter_classes_groups_test" ng-model="search.item_id" ng-options="group.id as group.name for group in classesGroups"> 
    <option value="">-- Choose Group --</option> 
</select> 

そのsearch.item_idは、選択した（とはその名）されているグループのIDを取得するようにするには、一時的にテンプレートのどこかに{{ search.item_id }}を追加してみてください。