Logique conditionnelle dans le modèle AngularJS

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

Si vous êtes arrivé ici à la recherche de réponses à la question générale de «logique conditionnelle dans les modèles», considérons également:

• 1.1.5 a également introduit un opérateur ternaire
• Ng-switch peut être utilisé pour ajouter / supprimer conditionnellement les éléments du DOM
• Voir aussi Comment applique-t-on conditionnellement les styles CSS dans AngularJS?

Réponse originale:

Voici une directive "ng-if" pas trop géniale:

 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> 

Fiddle .

ReplaceWith () est utilisé pour supprimer le contenu non nécessaire du DOM.

En outre, comme je l'ai mentionné sur Google+, le style ng peut probablement être utilisé pour charger conditionnellement des images d'arrière-plan, si vous souhaitez utiliser ng-show au lieu d'une directive personnalisée. (Pour le bénéfice d'autres lecteurs, Jon a déclaré sur Google+: "les deux méthodes utilisent ng-show que j'essaie d'éviter car elles utilisent l'affichage: aucune et laisse des balises supplémentaires dans les DOM. C'est un problème particulier dans ce scénario parce que L'élément caché aura une image d'arrière-plan qui sera encore chargée dans la plupart des navigateurs. ").
Voir aussi Comment puis-je appliquer conditionnellement les styles CSS dans AngularJS?

La directive angular-ui ui-if surveille les modifications de la condition / expression if. Le mien ne le fait pas. Ainsi, alors que ma mise en œuvre simple mettra à jour correctement la vue si le modèle change de sorte qu'il affecte uniquement la sortie du modèle, il ne mettra pas à jour la vue correctement si la réponse condition / expression change.

Par exemple, si la valeur d'un from.name change dans le modèle, la vue sera mise à jour. Mais si vous delete $scope.data.messages[0].from , le nom de l'utilisateur sera supprimé de la vue, mais le modèle ne sera pas supprimé de la vue car la condition / expression if n'est pas surveillée.

Vous pouvez utiliser la directive ngSwitch :

  <div ng-switch on="selection" > <div ng-switch-when="settings">Settings Div</div> <span ng-switch-when="home">Home Span</span> <span ng-switch-default>default</span> </div> 

Si vous ne souhaitez pas que le DOM soit chargé avec des divs vides, vous devez créer votre directive personnalisée en utilisant $ http pour charger les modèles (sous) et $ compiler pour l'injecter dans le DOM quand une certaine condition est atteinte.

Ce n'est qu'un exemple (non testé). Il peut et devrait être optimisé:

HTML:

 <conditional-template ng-model="element" template-url1="path/to/partial1" template-url2="path/to/partial2"></div> 

Directif:

 app.directive('conditionalTemplate', function($http, $compile) { return { restrict: 'E', require: '^ngModel', link: function(sope, element, attrs, ctrl) { // get template with $http // check model via ctrl.$viewValue // compile with $compile // replace element with element.replaceWith() } }; }); 

Vous pouvez utiliser ng-show sur chaque élément div dans la boucle. Est-ce ce que vous vouliez: http://jsfiddle.net/pGwRu/2/ ?

 <div class="from" ng-show="message.from">From: {{message.from.name}}</div>