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

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