有条件的ng-include in angularjs

Question

如何在angularJS中有条件地执行ng-include？

例如,我只想包含一些东西,如果变量x设置为true.

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

Answer 1

如果您使用的是Angular v1.1.5或更高版本,则还可以使用ng-if:

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

如果您有任何旧版本:

使用ng-switch:

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

小提琴

Answer 2

你也可以这样做

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

在你的控制器中

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

Answer 3

其中一个答案的更易读的版本.加上设置ng-include到null删除元素-就像ng-if.

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

Answer 4

如果条件足够简单,您还可以将条件逻辑直接放在ng-include表达式中:

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

请注意,表达式x不是单引号,因此会进行求值.有关详细信息,请参阅http://plnkr.co/edit/4fvNDa6Gm3dbVLgsAZrA.