Conditional ng-include in angularjs

Question

How can I do the ng-include conditionally in angularJS?

For example I only want to include something if, the variable x is set to true.

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

Mark Rajcok · Accepted Answer · 2015-11-12T17:58:10.513

120

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

edited Nov 12 '15 at 17:58

answered Apr 12 '13 at 14:35

Mark Rajcok

348,511
112
482
482

5

Yes, it is currently broken in 1.2: https://github.com/angular/angular.js/issues/3627 – Mark Rajcok Aug 20 '13 at 12:44
2

The issue was fixed in v1.2.2-23ba287 http://code.angularjs.org/snapshot/angular.js – Eugene Gluhotorenko Nov 18 '13 at 16:00
7

See https://github.com/angular/angular.js/issues/3627#issuecomment-23539882 ; in current versions (1.2.*) you cannot use ng-switch and ng-include on the same element, so you need something like:
/div>
– Maarten Dec 16 '13 at 12:19

score 68 · Answer 2 · answered Apr 12 '13 at 16:18

68

You could also do

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

In your controller

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

answered Apr 12 '13 at 16:18

ganaraj

26,759
6
61
59

Just really nice. The `ng-switch` marked answer didn't work for me. – im1dermike Aug 20 '15 at 19:43
1

Is a Controller appropriate for set view files? i think, No. @Mark Rajcok answer is true. – ivahidmontazer May 26 '16 at 11:05

score 16 · Answer 3 · answered Apr 26 '14 at 10:07

16

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>

answered Apr 26 '14 at 10:07

Rafał Lindemann

283
3
7

score 11 · Answer 4 · answered Jan 24 '14 at 20:18

11

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.

answered Jan 24 '14 at 20:18

dspies

1,455
14
19

I would say the accepted solution is actually more readable since the check condition and actual include are nicely separated. – Tobias Sep 25 '14 at 06:03

score 2 · Answer 5 · answered Jan 12 '15 at 09:00

I encountered a similar issue and may be this finding can help someone. I have to display different partials on click of link but ng-if and ng-switch both were not working in this scenario(Below code was not working).

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

So what I did is, instead of using ng-if, On click of link just update the value of partialArticleUrl (which is a model in controller) and declare below code on html.

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

Conditional ng-include in angularjs

5 Answers5

Linked