web-dev-qa-db-ja.com

深いプロパティによるフィルターの繰り返し

プロパティ値としてオブジェクトを持つ複雑なオブジェクトがある場合、ネストされたプロパティの1つでどのようにフィルタリングできますか？

OOB ng-repeatフィルターでこれを実行できますか？

データ

{
  Name: 'John Smith',
  Manager: {
     id: 123,
     Name: 'Bill Lumburg'
  }
}

ngRepeat

<li ng-repeat="e in emps | filter:Manager.Name">{{ e.Name }}</li>
javascriptjsonangularjsfilterangularjs-ng-repeat
50
ExceptionLimeCat

次の方法でフィルタリングするには、引数を渡す必要があります。

<input ng-model="filter.key">
<ul>
  <li ng-repeat="e in list | filter: {Manager: {Name: filter.key}}">
    {{e.Name}}  (Manager: {{e.Manager.Name}})
  </li>
</ul>

プランカーの例

110
Ray

複数のプロパティをフィルタリングする場合、構文は次のようになります。

<ul>
  <li ng-repeat="item in list | {filter: top_object_property_name: value, top_object_property_with_nested_objects_name: {nested_object_property_name: value}}">
       ...
  </li>
</ul>

例えば：

        var employees = [name: 'John', roles: [{roleName: 'Manager'},{roleName: 'Supervisor'}]];

        <li ng-repeat="staff in employees | {filter: name: 'John', roles: {roleName: 'Manager'}}">
              ...
        </li>
2
Rob

デフォルトで実装されたanglejsのネストされたobjフィルタの最新バージョンでは、フィルタを通常どおり使用できます。 angular 1のみ

1
Murali

複数の深いプロパティでフィルタリングするには、カスタムフィルターを作成する必要があります。つまり、オブジェクト内のデータをフィルターし、必要なオブジェクト（フィルターオブジェクト）を返す独自の関数を作成する必要があります。

たとえば、私はオブジェクトの下からデータをフィルタリングする必要があります-

[
{
   "document":{
      "documentid":"1",
      "documenttitle":"test 1",
      "documentdescription":"abcdef"
       }
},
{
   "document":{
      "documentid":"2",
      "documenttitle":"dfjhkjhf",
      "documentdescription":"dfhjshfjdhsj"
       }
}
]

HTMLでは、ng-repeatを使用してドキュメントリストを表示します-

<div>
   //search input textbox
   <input ng-model="searchDocument" placeholder="Search">
 </div>
<div ng-repeat="document in documentList | filter: filteredDocument">
   //our html code 
</div>

コントローラでは、「documenttitle」と「documentdescription」というオブジェクトの2つのプロパティを使用して、フィルタリングされたオブジェクトを返すフィルタ関数を作成します。コード例は次のとおりです-

function filterDocuments(document)
        {
            if($scope.searchDocument)
            {
                     if(document.documentTitle.toLowerCase().indexOf($scope.searchDocument.toLowerCase()) !== -1 || document.document.shortDescription.toLowerCase().indexOf($scope.searchDocument.toLowerCase()) !== -1)
                {
                    //returns filtered object
                    return document
                }
            }else {
               return document;
            }
        }

$ scope.searchDocumentは、ユーザーが検索するテキストを入力できる検索テキストボックス（HTML入力タグ）にバインドされたスコープ変数です。

1
Ravindra Vairagi