Condizionale ng-include in angularjs

93

Come posso fare condizionalmente ng-include in angularJS?

Ad esempio, voglio includere qualcosa solo se la variabile xè impostata su true.

<div ng-include="/partial.html"></div>

angularjs angularjs-ng-include

— JustGoscha
fonte

120

Se stai usando Angular v1.1.5 o successiva, puoi anche usare ng-if :

<div ng-if="x" ng-include="'/partial.html'"></div>

Se hai una versione precedente:

Usa ng-switch :

<div ng-switch on="x">
   <div ng-switch-when="true" ng-include="'/partial.html'"></div>
</div>

Violino

— Mark Rajcok
fonte

5

Sì, attualmente è rotto in 1.2: github.com/angular/angular.js/issues/3627

— Mark Rajcok

2

Il problema è stato risolto nella v1.2.2-23ba287 code.angularjs.org/snapshot/angular.js

— Eugene Gluhotorenko

7

Vedi github.com/angular/angular.js/issues/3627#issuecomment-23539882 ; nelle versioni attuali (1.2. *) non puoi usare ng-switch e ng-include sullo stesso elemento, quindi hai bisogno di qualcosa come: <div ng-switch-when = "true"> <div ng-include = "'qualcosa ""> </div> <// div>

— Maarten

68

Potresti anche farlo

<div ng-include="getInclude()"></div>

Nel tuo controller

$scope.getInclude = function(){
    if(x){
        return "partial.html";
    }
    return "";
}

— ganaraj
fonte

Semplicemente davvero carino. La ng-switchrisposta contrassegnata non ha funzionato per me.

— im1dermike

1

Un controller è appropriato per i file di visualizzazione del set? Penso di no, la risposta di @Mark Rajcok è vera.

— ivahidmontazer

16

Versione un po 'più leggibile di una delle risposte. L'impostazione Plus ng-includeper nullrimuovere l'elemento, proprio come ng-if.

<div ng-include="x ? 'true-partial.html' : null"></div>

— Rafał Lindemann
fonte

11

Se la condizione è abbastanza semplice, potresti anche inserire la logica condizionale direttamente nell'espressione ng-include:

<div ng-include="x && 'true-partial.html' || 'false-partial.html'"></div>

Nota che l'espressione xnon è racchiusa tra virgolette singole e quindi valutata. Vedi http://plnkr.co/edit/4fvNDa6Gm3dbVLgsAZrA per maggiori dettagli.

— dspies
fonte

Direi che la soluzione accettata è in realtà più leggibile poiché la condizione di controllo e l'inclusione effettiva sono ben separate.

— Tobias

2

Ho riscontrato un problema simile e potrebbe essere che questa scoperta possa aiutare qualcuno. Devo visualizzare diversi parziali al clic del collegamento, ma ng-if e ng-switch non funzionavano entrambi in questo scenario (il codice sotto non funzionava).

<button type="button" class="btn btn-link" ng-click="viewType('LIST')">List All</button>
<button type="button" class="btn btn-link" ng-click="viewType('EDIT')">Edit</button>
<button type="button" class="btn btn-link" ng-click="viewType('VIEW')">View</button>

<section class="col-md-8 left-col">
    <span ng-if = "LIST">
        <div data-ng-include="'./app/view/articles/listarticle.html'">
    </span>
    <span ng-if = "EDIT">
        <div data-ng-include="'./app/view/articles/editorarticle.html'">
    </span>

</section>

Quindi quello che ho fatto è, invece di usare ng-if, al clic del collegamento aggiorna semplicemente il valore di partialArticleUrl (che è un modello nel controller) e dichiara il codice sottostante su html.

        <section class="col-md-8 left-col">
            <div data-ng-include="partialArticleUrl">
        </section>

— KanhuP2012
fonte