Dans les instructions natives d'Angular, ces instructions sont utilisées pour contrôler si les éléments sont affichés ou non, ng-show / ng-hide / ng-if et ng-switch.
Nous l'utilisons également souvent dans l'optimisation des performances angulaires.
Regardons leurs différences.
Parmi eux, Ng-Sow et Ng-Hide sont les mêmes, sauf que Ng-Sow affiche les conditions lorsqu'ils se rencontrent, et Ng-Hide cache les conditions lorsqu'ils se rencontrent. Nous ne mentionnerons pas Ng-Hide ci-dessous.
ng-spectacle
Une valeur bool reçue par ng-show sera déclenchée pour afficher le nœud Dom lorsque cela est vrai. Lorsque la valeur de ng-show est fausse, une classe de ng-hide est ajoutée au nœud DOM et l'expression de cette classe est "Affichage: aucun". Lorsque DOM se charge, tous les nœuds de NG-show seront chargés. C'est-à-dire que Ng-Show se cache uniquement et affiche le nœud Dom. Cela signifie que s'il y a trop d'huile dans l'instruction NG-spectacle, même s'ils ne l'affichent pas, le nœud DOM dans lequel ils se trouvent seront toujours rendus.
ng-if
ng-si reçoit également une valeur bool. Lorsque sa valeur est fausse, le nœud qu'il contrôle n'est pas créé ou le nœud DOM précédent sera détruit. Même si ce nœud contient beaucoup de liaisons NG, elle ne sera pas exécutée. Par conséquent, dans le développement du projet, si nous n'avons pas besoin de charger le DOM en même temps, nous pouvons utiliser NG-IF pour empêcher l'événement NG de se produire, accélérant ainsi la vitesse de chargement du DOM. Surtout lors de la répétition, l'effet est particulièrement évident lorsque chaque élément de données contient des structures de données complexes. Lorsque sa valeur est vraie, un nœud DOM sera créé.
Donc, si vous utilisez des instructions et des modèles pour rendre des informations supplémentaires, telles que cliquer pour afficher les informations détaillées de l'élément de liste, assurez-vous d'utiliser NG-IF (AngularJsv. 1.1.5 et plus tard). Il bloque le rendu (par rapport à Ng-show).
interrupteur ng
L'existence de Ng-Switch nous évite beaucoup de problèmes (il convient de dire qu'angular lui-même est comme ça). Par exemple, nous avons utilisé la façon traditionnelle de créer un onglet à onglet. Nous devons boucler encore et encore, puis juger l'état actuel, puis exécuter les choses correspondantes. L'utilisation de Ng-Switch dans Angular est très simple. Ng-Switch doit d'abord écouter une certaine variable et quel contenu sera affiché ci-dessous lorsque la variable est évaluée. Comme indiqué ci-dessus, lors de l'écoute d'une variable de type, lorsque la valeur du type est égale à «AAA», cette zone sera créée et affichée; Lorsque la valeur du type est égale à «BBB», tous les doms de «AAA» précédents seront détruits, puis tous les «BB» seront créés et affichés.
Exemple http://jsbin.com/hinehi/1/edit