ng-repeat: filtra por campo único

484

Tengo una variedad de productos que repito usando ng-repeat y estoy usando

<div ng-repeat="product in products | filter:by_colour"> 

para filtrar estos productos por color. El filtro funciona, pero si el nombre / descripción del producto, etc. contiene el color, el producto permanece después de aplicar el filtro.

¿Cómo configuro el filtro para que solo se aplique al campo de color de mi matriz en lugar de a todos los campos?

Tim Webster
fuente
Los filtros personalizados también son potentes =), puede que le guste, por ejemplo: noypi-linux.blogspot.com/2014/07/…
Noypi Gilas
Solución diferente: stackoverflow.com/a/24992197/257470
andrew.fox
Gran trabajo deletreando el color de la manera correcta
MikeKulls

Respuestas:

475

Vea el ejemplo en la página de filtro . Use un objeto y establezca el color en la propiedad de color:

Search by color: <input type="text" ng-model="search.color">
<div ng-repeat="product in products | filter:search"> 
Mark Rajcok
fuente
Gracias Mark, ¿hay algún beneficio en hacerlo de esta manera en lugar del método sugerido a continuación?
Tim Webster
77
@Seglespaan, en realidad no. Es posible que el método presentado por bmleite y blesh se lea mejor, ya que puede ver que está filtrando por color. Este método es más compacto, lo que podría ser útil si desea buscar por varias propiedades, y prefiere no tener un objeto largo en el HTML: filter:{ color: '...', size: '...', ...}
Mark Rajcok
2
@MarkRajcok, ¿cómo podría buscar por múltiples propiedades, mirando la unión, en lugar de la intersección?
jetcom
2
@jetcom, necesitará un filtro personalizado, consulte stackoverflow.com/a/13845135/215945
Mark Rajcok
1
No sé si el OP preguntaba cómo hacer un cuadro de búsqueda tanto como cómo filtrar los valores en una repetición ng cuando se repiten en la página. La respuesta debajo de esta parece más relevante para la pregunta formulada.
twknab
573

Especifique la propiedad (es decir colour) donde desea que se aplique el filtro:

<div ng-repeat="product in products | filter:{ colour: by_colour }">
bmleite
fuente
55
que pasa si quiero! by_colour como filtro: {color:! by_colour} "
rjdmello
27
@rjdmello solo antepone '!'+, así<div ng-repeat="product in products | filter:{ colour: '!'+by_colour }">
bmleite
3
No estoy seguro si he entendido correctamente, pero el primero que le vino a la mente fue: <div ng-repeat="product in products | filter:{ resultsMap.annie: '!!' }"> o (algo equivalente) como esta: <div ng-repeat="product in products | filter:by">y en el controlador: $scope.by = { 'resultsMap.annie': '!!' };. Este segundo enfoque le brinda más control sobre la propiedad que se filtra. Nota: '!!'significa "no nulo".
bmleite
2
@Federico, customFilterpuede ser un objeto simple en tu scopeque actualizas cuando sea necesario. Mira este saqueador .
bmleite
1
Esta debería ser la respuesta aceptada. Es el más sucinto. Bueno, excepto que el 'color' tiene demasiadas vocales.
Rap
176

Puede filtrar por un objeto con una propiedad que coincida con los objetos que tiene que filtrar:

app.controller('FooCtrl', function($scope) {
   $scope.products = [
       { id: 1, name: 'test', color: 'red' },
       { id: 2, name: 'bob', color: 'blue' }
       /*... etc... */
   ];
});
<div ng-repeat="product in products | filter: { color: 'red' }"> 

Por supuesto, esto se puede pasar por variable, como sugirió Mark Rajcok.

Ben Lesh
fuente
2
Digamos que tengo este tipo de alcance. Productos: {id: 1, nombre: 'prueba', color: 'azul claro'}, {id: 2, nombre: 'bob', color: [{primer plano: negro, fondo : blanco}]}. entonces, ¿cómo puedo filtrar el producto en función del color: fondo para obtener el valor de blanco?
Gery
2
@Gery: Sinceramente, no creo que puedas. De cualquier manera, usando filtro: en absoluto es una mala práctica, en mi opinión. En eso pone lógica en su punto de vista que realmente debería estar en su controlador, y no es muy comprobable.
Ben Lesh
Esta es una forma de mover el filtrado al controlador y extender el modelo. ozkary.com/2015/05/angularjs-value-mapping-with-dynamic.html .
ozkary
106

Si desea filtrar en un nieto (o más profundo) del objeto dado, puede continuar construyendo su jerarquía de objetos. Por ejemplo, si desea filtrar en 'thing.properties.title', puede hacer lo siguiente:

<div ng-repeat="thing in things | filter: { properties: { title: title_filter } }">

También puede filtrar múltiples propiedades de un objeto simplemente agregándolas a su objeto de filtro:

<div ng-repeat="thing in things | filter: { properties: { title: title_filter, id: id_filter } }">
David Hansen
fuente
2
es esto como 'o' tipo o 'y' tipo de filtro.
sms
1
¿La misma pregunta es que un AND o un OR al filtrar más de una propiedad?
lostintranslation
1
Creo que el filtro OR solo es un filtro personalizado
Dmitri Algazin
99

La mejor manera de hacer esto es usar una función:

html

<div ng-repeat="product in products | filter: myFilter">

javascript

$scope.myFilter = function (item) { 
    return item === 'red' || item === 'blue'; 
};

Alternativamente, puede usar ngHide o ngShow para mostrar y ocultar dinámicamente elementos según un determinado criterio.

Khader MA
fuente
64

Tenga cuidado con el filtro angular. Si desea seleccionar un valor específico en el campo, no puede usar filtro.

Ejemplo:

javascript

app.controller('FooCtrl', function($scope) {
   $scope.products = [
       { id: 1, name: 'test', color: 'lightblue' },
       { id: 2, name: 'bob', color: 'blue' }
       /*... etc... */
   ];
});

html

<div ng-repeat="product in products | filter: { color: 'blue' }"> 

Esto seleccionará ambos, porque usar algo como substr
Eso significa que desea seleccionar un producto donde "color" contiene cadena "azul" y no donde "color" es "azul".

Petr B.
fuente
88
<div ng-repeat="product in products | filter: { color: 'blue' }:true">solo funcionará en coincidencias exactas (el "verdadero" al final es el argumento de comparación: enlace
Mark
21

Búsqueda por color:

<input type="text" ng-model="searchinput">
<div ng-repeat="product in products | filter:{color:searchinput}">

También puedes hacer un nido interior.

filter:{prop1:{innerprop1:searchinput}}
CyberNinja
fuente
10

Si hicieras lo siguiente:

<li class="active-item" ng-repeat="item in mc.pageData.items | filter: { itemTypeId: 2, itemStatus: 1 } | orderBy : 'listIndex'"
                id="{{item.id}}">
    <span class="item-title">{{preference.itemTitle}}</span>
</li>

... no solo obtendría elementos de itemTypeId 2 y itemStatus 1, sino que también obtendría elementos con itemType 20, 22, 202, 123 y itemStatus 10, 11, 101, 123. Esto se debe a que el filtro: {.. .} la sintaxis funciona como una cadena contiene consulta.

Sin embargo, si agregara la condición : verdadero , filtraría por coincidencia exacta:

<li class="active-item" ng-repeat="item in mc.pageData.items | filter: { itemTypeId: 2, itemStatus: 1 } : true | orderBy : 'listIndex'"
                id="{{item.id}}">
    <span class="item-title">{{preference.itemTitle}}</span>
</li>
Phil
fuente
4

mi camino es este

subjcts is

[{"id":"1","title":"GFATM"},{"id":"2","title":"Court Case"},{"id":"3","title":"Renewal\/Validity"},{"id":"4","title":"Change of Details"},{"id":"5","title":"Student Query"},{"id":"6","title":"Complains"}]

sub es un campo de entrada o lo que quieras

Mostrando así

<div ng-if="x.id === sub" ng-repeat=" x in subjcts">{{x.title}}</div>
Asad Ali Khan
fuente
En general, usar ng-if es una solución limpia
Kilizo
4

Debe usar en filter:{color_name:by_colour}lugar de

filter:by_colour

Si desea hacer coincidir con una sola propiedad de un objeto, escriba esa propiedad en lugar del objeto, de lo contrario, alguna otra propiedad obtendrá coincidencia.

amit banerjee
fuente
1

Especifique la propiedad en filtro, del objeto en el que desea aplicar filtro:

//Suppose Object
var users = [{
  "firstname": "XYZ",
  "lastname": "ABC",
  "Address": "HOUSE NO-1, Example Street, Example Town"
},
{
  "firstname": "QWE",
  "lastname": "YUIKJH",
  "Address": "HOUSE NO-11, Example Street1, Example Town1"
}]

Pero desea aplicar el filtro solo en el nombre

<input type = "text" ng-model = "first_name_model"/>
<div ng-repeat="user in users| filter:{ firstname: first_name_model}">
Neeraj Bansal
fuente
0

Si desea filtrar por un campo:

label>Any: <input ng-model="search.color"></label> <br>
<tr ng-repeat="friendObj in friends | filter:search:strict">

Si desea filtrar para todos los campos:

 label>Any: <input ng-model="search.$"></label> <br>
 <tr ng-repeat="friendObj in friends | filter:search:strict">

y https://docs.angularjs.org/api/ng/filter/filter bueno para ti

milad dn
fuente