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>