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

Ng-include conditionnel dans angularjs

Réponses: