Logique conditionnelle dans le modèle AngularJS

Angulaire 1.1.5 a introduit le ng-si de la directive. C'est la meilleure solution pour ce problème particulier. Si vous utilisez une ancienne version D'Angular, envisagez d'utiliser angular-ui ui-if directive.

si vous êtes arrivé ici à la recherche de réponses à la question générale de "logique conditionnelle dans les modèles" aussi considérer:

• 1.1.5 introduit également un opérateur ternaire
• ng-switch peut être utilisé pour ajouter/supprimer des éléments du DOM
• voir aussi Comment puis-je conditionnellement appliquer des styles CSS en AngularJS?

---

réponse originale:

Voici un pas-si-grand "ng-si" directive:

myApp.directive('ngIf', function() {
    return {
        link: function(scope, element, attrs) {
            if(scope.$eval(attrs.ngIf)) {
                // remove '<div ng-if...></div>'
                element.replaceWith(element.children())
            } else {
                element.replaceWith(' ')
            }
        }
    }
});

qui permet cette syntaxe HTML:

<div ng-repeat="message in data.messages" ng-class="message.type">
   <hr>
   <div ng-if="showFrom(message)">
       <div>From: {{message.from.name}}</div>
   </div>    
   <div ng-if="showCreatedBy(message)">
      <div>Created by: {{message.createdBy.name}}</div>
   </div>    
   <div ng-if="showTo(message)">
      <div>To: {{message.to.name}}</div>
   </div>    
</div>

Violon .

remplaceavec() est utilisée pour supprimer le contenu inutile de le DOM.

aussi, comme je l'ai mentionné sur Google+, ng-style peut probablement être utilisé pour charger conditionnellement des images d'arrière-plan, si vous voulez utiliser ng-show au lieu d'une directive personnalisée. (Pour le bénéfice des autres lecteurs, Jon a déclaré sur Google+: "les deux méthodes utilisent ng-show que j'essaie d'éviter parce qu'il utilise display:none et laisse un markup supplémentaire dans le DOM. C'est un problème particulier dans ce scénario parce que l'élément masqué aura une image de fond qui sera toujours chargé dans la plupart des navigateurs.").

Voir aussi Comment puis-je conditionnellement appliquer des styles CSS en AngularJS?

Le angular-ui ui-si directive montres pour les changements de la condition if/expression. La mienne n'a pas. Ainsi, alors que mon la mise en œuvre simple mettra à jour la vue correctement si le modèle change de telle sorte qu'il affecte seulement la sortie du modèle, il ne mettra pas à jour la vue correctement si la condition/réponse d'expression change.

par exemple, si la valeur d'un de.changement de nom dans le modèle, la vue sera mise à jour. Mais si vous delete $scope.data.messages[0].from , le nom de from sera supprimé de la vue, mais le modèle ne sera pas supprimé de la vue parce que la condition/expression if n'est pas observée.