ng-si vérifier si le tableau est vide

L'API, je travaille avec des retours si il n'y a pas d'éléments dans le tableau

items: []

Si il y a des éléments dans le tableau, il renvoie à quelque chose comme

items: [
  {
    name: 'Bla'
  }
]

Dans mon template, je crois que j'ai besoin d'utiliser ng-si pour afficher/masquer un élément s'il y a des données là ou pas.

<p ng-if="post.capabilities.items"><strong>Topics</strong>: <span ng-repeat="topic in post.capabilities.items">{{topic.name}}</p>

Cependant je pourrais être complètement hors de la base, comme c'est ma première fois de travailler dans Angulaire, et il peut y avoir une bien meilleure façon de faire ce que je suis en train de faire.

InformationsquelleAutor TheEks | 2016-01-27
  1. 87

    post.capabilities.items va encore être définie, car c'est un tableau vide, si vous cochez post.capabilities.items.length il devrait fonctionner correctement car 0 est falsy.

    InformationsquelleAutor Martijn Welker
  2. 36

    Vérifier la length propriété de la matrice supérieure 0:

    <p ng-if="post.capabilities.items.length > 0">
   <strong>Topics</strong>: 
   <span ng-repeat="topic in post.capabilities.items">
     {{topic.name}}
   </span>
</p>

    Tableaux (les objets) sont en JavaScript truthy valeurs, de sorte que votre vérification initiale <p ng-if="post.capabilities.items"> évalue toujours à true, même si le tableau est vide.

    • Malheureusement cela ne fonctionne pas si le tableau est null ou undefined - je obtenir une erreur d'exécution.
    • Avez-vous trouver un moyen pour les nuls des matrices?
    • Comme la accepté de répondre à des points de sortie, il suffit d'utiliser: ng-si="post.des capacités.éléments.longueur" Puis null, indéfini et 0 longueur tout à false.
    InformationsquelleAutor Dmitri Pavlutin
  3. 19

    À surmonter les null /undefined problème, essayez d'utiliser le ? opérateur de vérifier l'existence:

    <p ng-if="post?.capabilities?.items?.length > 0">

    • Passage, si quelqu'un a obtenu de cette page à la recherche d'un Ionique Cadre réponse, assurez-vous d'utiliser *ngIf:

      <p *ngIf="post?.capabilities?.items?.length > 0">
    InformationsquelleAutor Grant