web-dev-qa-db-fra.com

ng Repeat Filtre par propriété profonde

Si j'ai un objet complexe avec des objets comme valeurs de propriété, comment puis-je filtrer selon l'une des propriétés imbriquées?

Cela peut-il être fait avec le filtre OOB ng-repeat?

Les données 

{
  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

Vous devez passer l'argument pour filtrer par:

<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>

Exemple sur Plunker

108
Ray

Si vous filtrez plusieurs propriétés, la syntaxe sera semblable à celle ci-dessous.

<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>

par exemple:

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

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

Dans la dernière version du filtre obj imbriqué angularjs implémenté par default.can, utiliser le filtre normalement . Il ne convient que pour angular 1

1
Murali

Pour filtrer avec plusieurs propriétés profondes, nous devons créer un filtre personnalisé . Ce que je veux dire, nous devons créer notre propre fonction pour filtrer les données dans objet et renvoyer l'objet requis (objet filtré).

Par exemple, je dois filtrer les données de l'objet ci-dessous -

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

En HTML, nous utilisons ng-repeat pour afficher la liste de documents -

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

Dans Controller, nous écrivons une fonction de filtrage pour renvoyer un objet filtré à l’aide de deux propriétés d’objet qui sont "documenttitle" et "documentdescription".

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;
            }
        }

Où $ scope.searchDocument est la variable d’étendue qui est liée à la zone de texte de recherche (balise d’entrée HTML) dans laquelle l’utilisateur peut saisir le texte à rechercher.

1
Ravindra Vairagi