javascript - ejemplos - ngRepeat Filtrar por propiedad profunda

map filter and reduce javascript

Question

Si tengo un objeto complejo con objetos como valores de propiedad, ¿cómo puedo filtrar por una de las propiedades anidadas?

¿Se puede hacer esto con el filtro OOB ng-repeat?

Datos

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

ngRepeat

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

Answer 1

Debe pasar el argumento para filtrar por:

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

Ejemplo en Plunker

Answer 2

En la última versión del filtro obj anidado angularjs implementado por defecto, puede usar el filtro normalmente. Solo para angular 1

Answer 3

Si está filtrando varias propiedades, la sintaxis sería similar a la siguiente.

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

p.ej:

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

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

Answer 4

Para filtrar con múltiples propiedades profundas, necesitamos crear un filtro personalizado. Lo que quiero decir es que necesitamos crear nuestra propia función para filtrar los datos en el objeto y devolver el objeto requerido (objeto filtrado).

Por ejemplo, necesito filtrar datos del objeto a continuación:

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

En HTML usamos ng-repeat para mostrar la lista de documentos:

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

En Controller, escribimos la función de filtro para devolver el objeto filtrado utilizando dos propiedades de objeto que son "documenttitle" y "documentdescription", el ejemplo de código es el siguiente:

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

Donde $ scope.searchDocument es la variable de alcance que se unió al cuadro de texto de búsqueda (etiqueta de entrada HTML) en la que el usuario puede ingresar el texto para buscar.