Ng-include condicional en angularjs

93

¿Cómo puedo hacer ng-include condicionalmente en angularJS?

Por ejemplo, solo quiero incluir algo si la variable xestá configurada en true.

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

Respuestas:

120

Si está usando Angular v1.1.5 o posterior, también puede usar ng-if :

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

Si tiene una versión anterior:

Utilice ng-switch :

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

Violín

Mark Rajcok
fuente
5
Sí, actualmente está roto en 1.2: github.com/angular/angular.js/issues/3627
Mark Rajcok
2
El problema se solucionó en v1.2.2-23ba287 code.angularjs.org/snapshot/angular.js
Eugene Gluhotorenko
7
Consulte github.com/angular/angular.js/issues/3627#issuecomment-23539882 ; en las versiones actuales (1.2. *) no puede usar ng-switch y ng-include en el mismo elemento, por lo que necesita algo como: <div ng-switch-when = "true"> <div ng-include = "'algo '"> </div> <// div>
Maarten
68

Tu tambien puedes hacer 

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

En tu controlador

$scope.getInclude = function(){
    if(x){
        return "partial.html";
    }
    return "";
}
ganaraj
fuente
Realmente agradable. La ng-switchrespuesta marcada no funcionó para mí.
im1dermike
1
¿Es un controlador apropiado para configurar archivos de vista? Creo que no, la respuesta de @Mark Rajcok es verdadera.
ivahidmontazer
16

Una versión un poco más legible de una de las respuestas. Además, la configuración ng-includepara nulleliminar el elemento, al igual que ng-if.

<div ng-include="x ? 'true-partial.html' : null"></div>
Rafał Lindemann
fuente
11

Si la condición es lo suficientemente simple, también puede poner la lógica condicional directamente en la expresión ng-include:

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

Tenga en cuenta que la expresión xno está entre comillas simples y, por lo tanto, se evalúa. Consulte http://plnkr.co/edit/4fvNDa6Gm3dbVLgsAZrA para obtener más detalles.

dspies
fuente
Yo diría que la solución aceptada es en realidad más legible ya que la condición de verificación y la inclusión real están muy bien separadas.
Tobias
2

Encontré un problema similar y es posible que este hallazgo pueda ayudar a alguien. Tengo que mostrar diferentes parciales al hacer clic en el enlace, pero ng-if y ng-switch no funcionaban en este escenario (el código siguiente no funcionaba).

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

Entonces, lo que hice es, en lugar de usar ng-if, al hacer clic en el enlace, simplemente actualice el valor de partialArticleUrl (que es un modelo en el controlador) y declare el código siguiente en html.

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