Ng-include conditionnel dans angularjs

93

Comment puis-je faire le ng-include conditionnellement dans angularJS?

Par exemple, je veux seulement inclure quelque chose si, la variable xest définie sur true.

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

angularjs angularjs-ng-include

— JustGoscha
source

120

Si vous utilisez Angular v1.1.5 ou version ultérieure, vous pouvez également utiliser ng-if :

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

Si vous avez une version plus ancienne:

Utilisez ng-switch :

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

Violon

— Mark Rajcok
source

5

Oui, il est actuellement cassé en 1.2: github.com/angular/angular.js/issues/3627

— Mark Rajcok

2

Le problème a été résolu dans la version 1.2.2-23ba287 code.angularjs.org/snapshot/angular.js

— Eugene Gluhotorenko

7

Voir github.com/angular/angular.js/issues/3627#issuecomment-23539882 ; dans les versions actuelles (1.2. *), vous ne pouvez pas utiliser ng-switch et ng-include sur le même élément, vous avez donc besoin de quelque chose comme: <div ng-switch-when = "true"> <div ng-include = "'quelque chose '"> </div> <// div>

— Maarten

68

Tu pourrais aussi faire

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

Dans votre contrôleur

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

— ganaraj
source

Vraiment sympa. La ng-switchréponse marquée n'a pas fonctionné pour moi.

— im1dermike

1

Un contrôleur est-il approprié pour les fichiers de vue d'ensemble? Je pense que non, la réponse de @Mark Rajcok est vraie.

— ivahidmontazer

16

Une version un peu plus lisible de l'une des réponses. Réglage plus ng-includepour nullRetire l'élément - comme ng-if.

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

— Rafał Lindemann
source

11

Si la condition est assez simple, vous pouvez également placer la logique conditionnelle directement dans l'expression ng-include:

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

Notez que l'expression xn'est pas entre guillemets simples et donc évaluée. Voir http://plnkr.co/edit/4fvNDa6Gm3dbVLgsAZrA pour plus de détails.

— dspies
source

Je dirais que la solution acceptée est en fait plus lisible puisque la condition de vérification et l'inclusion réelle sont bien séparées.

— Tobias

2

J'ai rencontré un problème similaire et peut-être que cette découverte peut aider quelqu'un. Je dois afficher différents partiels en cliquant sur le lien, mais ng-if et ng-switch ne fonctionnaient pas tous les deux dans ce scénario (le code ci-dessous ne fonctionnait pas).

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

Donc, ce que j'ai fait, c'est, au lieu d'utiliser ng-if, sur un clic de lien, mettez simplement à jour la valeur de partialArticleUrl (qui est un modèle dans le contrôleur) et déclarez ci-dessous le code sur html.

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

— KanhuP2012
source