AngularJS ng-repeat maneja el caso de lista vacía
Pensé que esto sería algo muy común, pero no pude encontrar cómo manejarlo en AngularJS. Digamos que tengo una lista de eventos y quiero generarlos con AngularJS, entonces es bastante fácil:
<ul>
<li ng-repeat="event in events">{{event.title}}</li>
</ul>
Pero, ¿cómo manejo el caso cuando la lista está vacía? Quiero tener un cuadro de mensaje donde esté la lista con algo como "Sin eventos" o similar. Lo único que se acercaría es ng-switchcon events.length(¿cómo puedo comprobar si está vacío cuando es un objeto y no una matriz?), pero ¿es realmente esa la única opción que tengo?
Puedes usar ngShow .
<li ng-show="!events.length">No events</li>
Ver ejemplo .
O puedes usar ngHide
<li ng-hide="events.length">No events</li>
Ver ejemplo .
Para el objeto, puedes probar Object.keys .
Y si quieres usar esto con una lista filtrada, aquí tienes un buen truco:
<ul>
<li ng-repeat="item in filteredItems = (items | filter:keyword)">
...
</li>
</ul>
<div ng-hide="filteredItems.length">No items found</div>
Es posible que desees consultar la directiva angular-ui ui-if si solo deseas eliminar uldel DOM cuando la lista está vacía:
<ul ui-if="!!events.length">
<li ng-repeat="event in events">{{event.title}}</li>
</ul>
Con las versiones más nuevas de angularjs, la respuesta correcta a esta pregunta es usar ng-if:
<ul>
<li ng-if="list.length === 0">( No items in this list yet! )</li>
<li ng-repeat="item in list">{{ item }}</li>
</ul>
Esta solución no parpadeará cuando la lista esté a punto de descargarse porque la lista debe estar definida y con una longitud de 0 para que se muestre el mensaje.
Aquí hay un plunker para mostrarlo en uso: http://plnkr.co/edit/in7ha1wTlpuVgamiOblS?p=preview
Consejo: También puedes mostrar un texto de carga o un control giratorio:
<li ng-if="!list">( Loading... )</li>
