Filtrar una repetición ng angular 1.2 con "seguir por" por una propiedad booleana

80

Estoy tratando de filtrar algunos elementos de la lista en función del valor de una propiedad booleana, pero no importa lo que haga, siempre se muestra la lista completa. Algunas de las cosas que he probado se han estropeado tanto que no se muestra nada, pero eso no está ni aquí ni allá. No puedo hacer que mi filtrado funcione como deseo:

$scope.attendees = [
     {"firstname":"Steve",    "lastname":"Jobs",  "arrived":true,  "id":1}
    ,{"firstname":"Michelle", "lastname":"Jobs",  "arrived":false, "id":2}
    ,{"firstname":"Adam",     "lastname":"Smith", "arrived":true,  "id":3}
    ,{"firstname":"Megan",    "lastname":"Smith", "arrived":false, "id":4}
    ,{"firstname":"Dylan",    "lastname":"Smith", "arrived":false, "id":5}
    ,{"firstname":"Ethan",    "lastname":"Smith", "arrived":false, "id":6}
];

Usando el siguiente filtrado ng-repeat:

<ul>
    <li ng-repeat="person in attendees track by person.id | filter:arrived:'false'">
            {{person.lastname}}, {{person.firstname}}
    </li>
</ul>

Siento que probé todas las permutaciones que puedo encontrar referenciadas, la mayoría de las cuales provienen de varios resultados de búsqueda de StackOverflow:

  • filter:'arrived'
  • filter:arrived
  • filter:'person.arrived'
  • filter:person.arrived
  • filter:{arrived:true}
  • filter:{arrived:'true'}
  • filter:{person.arrived:true}
  • filter:{person.arrived:'true'}

También intenté crear una función de filtro personalizada:

$scope.isArrived = function(item) {
    return item.arrived;
};

Y aplicándolo así:

  • filter:isArrived
  • filter:'isArrived'
  • filter:{isArrived(person)}
  • filter:isArrived(person)
  • filter:'isArrived(person)'

Ninguno de estos parece funcionar. ¿Qué me estoy perdiendo?

Aquí hay un plnkr que demuestra mi problema .

angularjs angularjs-ng-repeat Adam Tuttle
fuente

Respuestas:

251

La pista de debe estar al final de la expresión:

<li ng-repeat="person in attendees | filter: {arrived: false } track by person.id">
Conejito gruff
fuente
3
Qué molesto voltear, y una pérdida de 30 minutos. Ojalá se usara trackBy: ..y actuara normalmente "como todo lo demás".
user2864740
Este es un punto muy importante. Al rastrear por valores únicos que eran en gran parte idénticos para la mayoría de los caracteres principales, recibíamos un error de duplicados porque rastrear por no era el último en la expresión. Error bastante oscuro en mi opinión.
Matt S
2

La respuesta de @Gruff es correcta, pero solo para dar una respuesta de una fuente oficial:

De los ng-repeatdocumentos de Angular :

Nota: track bydebe ser siempre la última expresión :

<div ng-repeat="model in collection | orderBy: 'id' as filtered_result track by model.id">
  {{model.name}}
</div>

También aparece en la parte "Argumentos" de los documentos:

Tenga en cuenta que la expresión de seguimiento debe aparecer en último lugar, después de los filtros y la expresión de alias.

Mistalis
fuente