angularjs - attribute - ng-attr

Condicional ng-include en angularjs

Question

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

Por ejemplo, solo quiero incluir algo si, la variable x se establece en true .

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

Answer 1

Encontré un problema similar y es posible que este hallazgo pueda ayudar a alguien. Tengo que mostrar diferentes parciales en el clic del enlace, pero ng-if y ng-switch no estaban funcionando 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 fue, en lugar de usar ng-if, al hacer clic en el enlace simplemente actualizar el valor de partialArticleUrl (que es un modelo en el controlador) y declarar el código a continuación en html.

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

Answer 2

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

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

Si tienes alguna versión anterior:

Use ng-switch :

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

Fiddle

Answer 3

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 x no está entre comillas simples y, por lo tanto, se evalúa. Consulte http://plnkr.co/edit/4fvNDa6Gm3dbVLgsAZrA para obtener más detalles.

Answer 4

También podrías hacer

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

En tu controlador

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

Answer 5

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

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