Bedingtes ng-include in anglejs

93

Wie kann ich das ng-include bedingt in angleJS durchführen?

Zum Beispiel möchte ich nur etwas einschließen, wenn die Variable auf gesetzt xist true.

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

angularjs angularjs-ng-include

— JustGoscha
quelle

120

Wenn Sie Angular v1.1.5 oder höher verwenden, können Sie auch ng-if verwenden :

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

Wenn Sie eine ältere Version haben:

Verwenden Sie den ng-Schalter :

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

Geige

— Mark Rajcok
quelle

5

Ja, es ist derzeit in 1.2 kaputt: github.com/angular/angular.js/issues/3627

— Mark Rajcok

2

Das Problem wurde in v1.2.2-23ba287 code.angularjs.org/snapshot/angular.js

— Eugene Gluhotorenko

7

Siehe github.com/angular/angular.js/issues/3627#issuecomment-23539882 ; In aktuellen Versionen (1.2. *) können Sie ng-switch und ng-include nicht für dasselbe Element verwenden. Sie benötigen daher Folgendes: <div ng-switch-when = "true"> <div ng-include = "'etwas '"> </ div> <// div>

— Maarten

68

Sie könnten auch tun

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

In Ihrem Controller

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

— Ganaraj
quelle

Einfach sehr schön. Die ng-switchmarkierte Antwort hat bei mir nicht funktioniert.

— im1dermike

1

Ist ein Controller für festgelegte Ansichtsdateien geeignet? Ich denke, Nein. @ Mark Rajcok Antwort ist wahr.

— ivahidmontazer

16

Eine etwas besser lesbare Version einer der Antworten. Plus-Einstellung ng-includezum nullEntfernen des Elements - genau wie ng-if.

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

— Rafał Lindemann
quelle

11

Wenn die Bedingung einfach genug ist, können Sie die bedingte Logik auch direkt in den Ausdruck ng-include einfügen:

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

Beachten Sie, dass der Ausdruck xnicht in einfachen Anführungszeichen steht und daher ausgewertet wird. Weitere Informationen finden Sie unter http://plnkr.co/edit/4fvNDa6Gm3dbVLgsAZrA .

— dspies
quelle

Ich würde sagen, dass die akzeptierte Lösung tatsächlich besser lesbar ist, da die Prüfbedingung und das tatsächliche Include gut voneinander getrennt sind.

— Tobias

2

Ich bin auf ein ähnliches Problem gestoßen und möglicherweise kann dieser Befund jemandem helfen. Ich muss beim Klicken auf den Link verschiedene Partials anzeigen, aber ng-if und ng-switch funktionierten in diesem Szenario nicht (der folgende Code funktionierte nicht).

<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>

Also, was ich getan habe, ist, anstatt ng-if zu verwenden, beim Klicken auf den Link einfach den Wert von PartialArticleUrl (das ein Modell in Controller ist) zu aktualisieren und den folgenden Code in HTML zu deklarieren.

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

— KanhuP2012
quelle