Faire une condition de rendu avec AngularJS

Question

Je sais comment créer une condition d' affichage dans AngularJS, qui affichera ou masquera un élément dom en fonction de la condition:

 <div ng-show="{{isTrue}}">Some content</div>
 

mais comment créer une condition de rendu qui détermine si le rendu doit être rendu ou non?

Answer 1

Mise à jour pour angularjs 1.1.5 et au-dessus des utilisateurs (non pris en charge dans 1.0.7):

Liés à engager: https://github.com/angular/angular.js/commit/2f96fbd17577685bc013a4f7ced06664af253944

Angulaire maintenant avoir un rendu conditionnel directive: ngIf.

Utilisation:

<div ng-if="conditional_expression"></div>

Notez que lorsqu'un élément est supprimé à l'aide de ngIf son champ d'application est détruit et un nouveau champ d'application est créée lors de la restauration de l'élément

Documentation: la directive-ngIf

L'héritage pour angularjs utilisateurs:

ngShow directive conditionnelle de masque/affiche l'élément. Cela va être changé dans l'une des nouvelles versions stables, il est maintenant disponible dans l' unstable de presse comme avec 1.1.5.

Si vous voulez conditionnellement ajouter/supprimer des éléments sur les DOM, vous pouvez utiliser ngSwitch.

<div ng-switch="showMe">
    <div ng-switch-when="true">Hello!</div>
</div>

En fait, cette directive a été créé pour le traitement d'affaires de plus de 1, mais vous pouvez l'utiliser de cette façon. Voir cette réponse pour des exemples plus sophistiqués usages.

Answer 2

La méthode recommandée consiste à utiliser ng-include

Exemple: http://jsfiddle.net/api/post/library/pure/

 <div ng-app="">
  <div ng-controller="Ctrl">
    <select ng-model="template" ng-options="t.name for t in templates">
     <option value="">(blank)</option>
    </select>
    url of the template: <tt>{{template.url}}</tt>
    <hr/>
    <div ng-include src="template.url"></div>
  </div>


  <!-- template1.html -->
  <script type="text/ng-template" id="template1.html">
    Content of template1.html
  </script>

  <!-- template2.html -->
  <script type="text/ng-template" id="template2.html">
    Content of template2.html
  </script>
</div>
 

Answer 3

Il y a au moins deux manières de le faire:

• rendre certains partielle à l'aide de gabarits
• utilisation simple expression conditionnelle fonction de rendu (voir ce violon et de la description ci-dessous)

Pour de simples composants, je vous recommande de coller à la fonction de rendu. Très facile à comprendre.

$scope.render = function(condition) {        
   return condition ? "This is rendered when condition == TRUE" : "This is rendered when condition == FALSE";
};

et tout simplement l'inclure dans votre code HTML, comme ceci:

{{render(true)}}

Vous pouvez également envelopper ceci angulaire de la directive, qui vous donnera de très belle balisage et des possibilités illimitées!

Answer 4

Regardez directive angulaire if . Je crois que cela vous servirait bien.