Ng-include condicional em angularjs

93

Como posso incluir o ng condicionalmente no angularJS?

Por exemplo, eu só quero incluir algo se a variável xfor definida como true.

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

angularjs angularjs-ng-include

— JustGoscha
fonte

120

Se você estiver usando Angular v1.1.5 ou posterior, também pode usar ng-if :

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

Se você tiver alguma versão mais antiga:

Use ng-switch :

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

Violino

— Mark Rajcok
fonte

5

Sim, atualmente está quebrado em 1.2: github.com/angular/angular.js/issues/3627

— Mark Rajcok

2

O problema foi corrigido em v1.2.2-23ba287 code.angularjs.org/snapshot/angular.js

— Eugene Gluhotorenko

7

Consulte github.com/angular/angular.js/issues/3627#issuecomment-23539882 ; nas versões atuais (1.2. *) você não pode usar ng-switch e ng-include no mesmo elemento, então você precisa de algo como: <div ng-switch-when = "true"> <div ng-include = "'something '"> </div> <// div>

— Maarten

68

Você também poderia fazer

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

Em seu controlador

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

— ganaraj
fonte

Muito bom. A ng-switchresposta marcada não funcionou para mim.

— im1dermike de

1

É um controlador apropriado para definir arquivos de exibição? eu acho, não. @Mark Rajcok resposta é verdadeira.

— ivahidmontazer

16

Uma versão um pouco mais legível de uma das respostas. Além disso, a configuração ng-includepara nullremove o elemento - exatamente como ng-if.

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

— Rafał Lindemann
fonte

11

Se a condição for simples o suficiente, você também pode colocar a lógica condicional diretamente na expressão ng-include:

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

Observe que a expressão xnão está entre aspas simples e, portanto, avaliada. Consulte http://plnkr.co/edit/4fvNDa6Gm3dbVLgsAZrA para obter mais detalhes.

— dspies
fonte

Eu diria que a solução aceita é, na verdade, mais legível, uma vez que a condição de verificação e a inclusão real estão bem separadas.

— Tobias

2

Eu encontrei um problema semelhante e pode ser que essa descoberta possa ajudar alguém. Eu tenho que exibir parciais diferentes no clique do link, mas ng-if e ng-switch não estavam funcionando neste cenário (o código abaixo não estava funcionando).

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

Então o que fiz foi, em vez de usar ng-if, ao clicar no link, apenas atualizar o valor de partialArticleUrl (que é um modelo no controlador) e declarar o código abaixo em html.

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

— KanhuP2012
fonte