javascript - example - ng repeat $first

Cómo mostrar un mensaje cuando el filtro no devuelve nada en ng-repeat-AngularJS

Question

Me gustaría mostrar un div (mensaje) cuando no se devuelven elementos en el filtro (ng-repeat).

El filtro está sucediendo según el cuadro de selección (modelo ng). Y no hay resultados para algunas opciones de selección, en ese momento el usuario debe poder leer un mensaje en el mismo lugar. ¿Puedo usar ng-show / hide aquí? ¿Cómo?

Gracias,

Answer 1

Hay una solución más simple usando solo la sintaxis estándar de ngRepeat.

Como se indica en la documentación oficial , ngRepeat acepta un alias para la colección incluso si se le aplica un filtro:

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

Nota : Agregué un filtro adicional de anuncios al ejemplo copiado de la documentación para tener un ejemplo más completo.

En este ejemplo puedes simplemente usar:

<div class="alert alert-info" 
     ng-show="filtered_result.length == 0">
    No items in the collection!
</div>

Lo probé con AngularJS 1.5.0, no sé cuándo se introdujo esta función.

Answer 2

Puede obtener el tamaño de la matriz devuelta por el filtro usando algo como

{{(data|filter:query).length}}

Puedes usar esta expresión para ng-show expression. No estoy seguro de cómo sería el rendimiento.

Answer 3

También puede guardar su matriz filtrada en una variable y luego usar esa variable dentro de la expresión ng-show :

<select ng-model="shade" ng-options="shade for shade in shades"></select><br>
<ul>
    <li ng-repeat="c in filteredColors = (colors | filter:shade)">{{c.name}}</li>
</ul>
<div ng-show="!filteredColors.length">No colors available</div>

Puedes verlo en acción en este plunker .