Conditional ng-include in angularjs

If you are using Angular v1.1.5 or later, you can also use ng-if:

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

If you have any older version:

Use ng-switch:

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

Fiddle

You could also do

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

In your controller

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

A little bit more readable version of one of the answers. Plus setting ng-include to null removes the element - just like ng-if.

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

If the condition is simple enough, you could also put the conditional logic directly in the ng-include expression:

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

Note the expression x is not in single quotes and therefore evaluated. See http://plnkr.co/edit/4fvNDa6Gm3dbVLgsAZrA for more details.

Related