javascript - example - Cómo filtrar por propiedad del objeto en angularJS

object filter angular

Question

Estoy intentando crear un filtro personalizado en AngularJS que filtrará una lista de objetos por los valores de una propiedad específica. En este caso, deseo filtrar por la propiedad "polaridad" (valores posibles de "Positivo", "Neutro", "Negativo").

Aquí está mi código de trabajo sin el filtro:

HTML:

<div class="total">
    <h2 id="totalTitle"></h2>
    <div>{{tweets.length}}</div>
    <div id="totalPos">{{tweets.length|posFilter}}</div>
    <div id="totalNeut">{{tweets.length|neutFilter}}</div>
    <div id="totalNeg">{{tweets.length|negFilter}}</div>
</div>

Aquí está la matriz "$ scope.tweets" en formato JSON:

{{created_at: "Date", text: "tweet text", user:{name: "user name", screen_name: "user       screen name", profile_image_url: "profile pic"}, retweet_count: "retweet count", polarity: "Positive"},
 {created_at: "Date", text: "tweet text", user:{name: "user name", screen_name: "user screen name", profile_image_url: "profile pic"}, retweet_count: "retweet count", polarity: "Positive"},
 {created_at: "Date", text: "tweet text", user:{name: "user name", screen_name: "user screen name", profile_image_url: "profile pic"}, retweet_count: "retweet count", polarity: "Positive"}}

El mejor filtro que podría encontrar es el siguiente:

myAppModule.filter(''posFilter'', function(){
return function(tweets){
    var polarity;
    var posFilterArray = [];
    angular.forEach(tweets, function(tweet){
        polarity = tweet.polarity;
        console.log(polarity);
        if(polarity===''Positive''){
              posFilterArray.push(tweet);
        }
        //console.log(polarity);
    });
    return posFilterArray;
};
});

Este método devuelve una matriz vacía. Y nada se imprime desde la declaración "console.log (polarity)". Parece que no estoy insertando los parámetros correctos para acceder a la propiedad del objeto de "polaridad".

¿Algunas ideas? Su respuesta es muy apreciada.

Answer 1

La documentation tiene la respuesta completa. De todos modos, así es como se hace:

<input type="text" ng-model="filterValue">
<li ng-repeat="i in data | filter:{age:filterValue}:true"> {{i | json }}</li>

filtrará solo la age en data matriz de data y la true es para la coincidencia exacta.

Para un filtrado profundo,

<li ng-repeat="i in data | filter:{$:filterValue}:true"> {{i}}</li>

El $ es una propiedad especial para el filtro profundo y el true es para una coincidencia exacta como la anterior.

Answer 2

Puedes probar esto. su trabajo para mí ''nombre'' es una propiedad en arr.

repeat="item in (tagWordOptions | filter:{ name: $select.search } ) track by $index

Answer 3

Simplemente tiene que usar el filter filtro (ver la documentación ):

<div id="totalPos">{{(tweets | filter:{polarity:''Positive''}).length}}</div>
<div id="totalNeut">{{(tweets | filter:{polarity:''Neutral''}).length}}</div>
<div id="totalNeg">{{(tweets | filter:{polarity:''Negative''}).length}}</div>

Fiddle

Answer 4

También podría hacer esto para hacerlo más dinámico.

<input name="filterByPolarity" data-ng-model="text.polarity"/>

Entonces ng-repeat se verá así

<div class="tweet" data-ng-repeat="tweet in tweets | filter:text"></div>

Este filtro, por supuesto, solo se usará para filtrar por polaridad

Answer 5

Tenemos colección como abajo:

Sintaxis:

{{(Collection/array/list | filter:{Value : (object value)})[0].KeyName}}

Ejemplo:

{{(Collectionstatus | filter:{Value:dt.Status})[0].KeyName}}

-O-

Sintaxis:

ng-bind="(input | filter)"

Ejemplo:

ng-bind="(Collectionstatus | filter:{Value:dt.Status})[0].KeyName"