Warunkowe ng-include w angularjs

94

Jak mogę warunkowo uwzględnić ng w angularJS?

Na przykład chcę dołączyć tylko coś, jeśli zmienna xjest ustawiona na true.

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

angularjs angularjs-ng-include

— JustGoscha
źródło

120

Jeśli używasz Angular w wersji 1.1.5 lub nowszej, możesz także użyć ng-if :

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

Jeśli masz starszą wersję:

Użyj ng-switch :

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

Skrzypce

— Mark Rajcok
źródło

5

Tak, obecnie jest zepsuty w wersji 1.2: github.com/angular/angular.js/issues/3627

— Mark Rajcok

2

Problem został rozwiązany w wersji 1.2.2-23ba287 code.angularjs.org/snapshot/angular.js

— Eugene Gluhotorenko

7

Zobacz github.com/angular/angular.js/issues/3627#issuecomment-23539882 ; w obecnych wersjach (1.2. *) nie można używać ng-switch i ng-include na tym samym elemencie, więc potrzebujesz czegoś takiego: <div ng-switch-when = "true"> <div ng-include = "'coś '"> </div> <// div>

— Maarten

68

Ty też możesz to zrobić

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

W twoim kontrolerze

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

— ganaraj
źródło

Po prostu bardzo miło. ng-switchZaznaczono odpowiedź nie działa dla mnie.

— im1dermike

1

Czy kontroler jest odpowiedni do ustawiania plików widoku? Myślę, że nie, odpowiedź @Mark Rajcok jest prawdziwa.

— ivahidmontazer

16

Nieco bardziej czytelna wersja jednej z odpowiedzi. Plus ustawienie, ng-includeaby nullusunąć element - tak jak ng-if.

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

— Rafał Lindemann
źródło

11

Jeśli warunek jest wystarczająco prosty, możesz również umieścić logikę warunkową bezpośrednio w wyrażeniu ng-include:

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

Zwróć uwagę, że wyrażenie xnie jest w apostrofach i dlatego jest oceniane. Więcej informacji można znaleźć pod adresem http://plnkr.co/edit/4fvNDa6Gm3dbVLgsAZrA .

— dspies
źródło

Powiedziałbym, że przyjęte rozwiązanie jest w rzeczywistości bardziej czytelne, ponieważ warunek sprawdzania i faktyczne dołączenie są ładnie oddzielone.

— Tobias

2

Napotkałem podobny problem i może to odkrycie może komuś pomóc. Muszę wyświetlać różne podszewki po kliknięciu linku, ale ng-if i ng-switch nie działały w tym scenariuszu (poniższy kod nie działał).

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

Więc zamiast używać ng-if, po kliknięciu linku zaktualizuj wartość PartialArticleUrl (który jest modelem w kontrolerze) i zadeklaruj poniższy kod w html.

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

— KanhuP2012
źródło