angularjs - example - ng-repeat filter multiple fields

ng-repeat: filtrar por campo único

Question

Tengo una variedad de productos que estoy repitiendo 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 que se aplica 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?

Answer 1

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

Answer 2

Debe usar filter:{color_name:by_colour} lugar de

filter:by_colour

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

Answer 3

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

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

Answer 4

Especifique la propiedad en el filtro, del objeto sobre el que desea aplicar el 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 quieres aplicar el filtro solo en el primer nombre

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

Answer 5

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 elementos de forma dinámica según un criterio determinado.

Answer 6

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 puede ser pasado por una variable, como sugirió Mark Rajcok.

Answer 7

Si desea filtrar por 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 en 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 } }">

Answer 8

Si fueras a hacer 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 ítems de itemTypeId 2 y itemStatus 1, sino que también obtendría ítems 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 : true , haría un filtro 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>

Answer 9

Si quieres filtrar por un campo:

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

Si quieres filtrar por todo el campo:

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

y filter bueno para ti

Answer 10

Tenga cuidado con el filtro angular. Si desea seleccionar un valor específico en el campo, no puede usar el 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 use algo como substr
Eso significa que desea seleccionar el producto donde "color" contiene la cadena "azul" y no donde "color" es "azul".

Answer 11

Vea el ejemplo en la página del filter . 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"> 

Answer 12

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

<div ng-if="x.id === sub" ng-repeat=" x in subjcts">{{x.title}}</div>