Fai una condizione rendering con AngularJS

Question

So come fare un vista condizione in AngularJS, che visualizzerà o elemento nascondere dom dipende dalla condizione:

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

ma come si crea un render condizione che determina se rendere o meno il div?

Answer 1

Aggiornamento per angularjs 1.1.5 e, soprattutto, gli utenti (non supportate in 1.0.7):

correlate commettere: https://github.com/angular/angular.js/commit/2f96fbd17577685bc013a4f7ced06664af253944

angolare hanno ora una direttiva resa condizionale: ngIf .

utilizzati:

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

noti che quando un elemento è rimosso utilizzando ngIf sua portata è distrutto e un nuovo ambito viene creato quando l'elemento viene ripristinato

Documentation: directive-ngIf

Per gli utenti legacy angularjs:

ngShow direttiva nasconde/mostra l'elemento. Questo sarà cambiato in una delle nuove versioni stabili, ora è disponibile nella versione unstable come con 1.1.5.

Se si desidera aggiungere/rimuovere condizionatamente elementi sul DOM, utilizzare può utilizzare ngSwitch.

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

In realtà, questa direttiva è stato creato per la gestione dei casi per più di 1, ma è possibile utilizzare in questo modo troppo. Vedere la risposta this per esempi di usi più sofisticati.

Answer 2

Ci sono almeno due modi per farlo:

• rendono alcuni parziale utilizzando templante
• uso semplice espressione con funzione di rendering condizionale (vedi this fiddle e descrizione sotto)

Per semplice componenti, raccomando di attenersi alla funzione di rendering. Molto facile da capire.

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

e semplicemente includere nel vostro HTML, in questo modo:

{{render(true)}} 

Si può anche avvolgere questo con direttiva angolare, che vi darà molto bello markup e possibilità illimitate!

Answer 3

modo consigliato è quello di utilizzare ng-includono

Esempio: 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 4

Guarda angular-uiif direttiva. Credo che questo ti possa servire bene.