CODEWITHSUNDEEP
javascriptangularjs
n83
n83

Reputation: 237

Add template conditionally in Angular

I have some data:

$scope.posts = [ 
    { 'name' : 'post1', 'templateName' : 'template1.html' }, 
    { 'name' : 'post2', 'templateName' : 'template2.html' }
]

...and I have two templates:

<script type="text/ng-template" id="template1.html">
   <p><span>{{post.name}}</p></li>
</script>
<script type="text/ng-template" id="template2.html">
   <p>{{post.name}}</p>
</script>

They are to be inserted into a list that is backed by $scope.posts, which in turn is listed with:

<li ng-repeat="post in posts"></li>

How do I iterate over $scope.posts and insert the right template, based on 'templateName', but also populate it with post.name?

Upvotes: 2

Views: 84

Answers (3)

Dayan Moreno Leon
Dayan Moreno Leon

Reputation: 5435

Just to be safe:

<li ng-repeat="post in posts">
    <div ng-include="post.templateName"></div>
</li>

In case some Browsers(IE) don't like non standard tags.

Upvotes: 1

n83
n83

Reputation: 237

So I ended up doing the following:

<li ng-repeat="post in posts">
    <ng-include src="post.template"></ng-include>
</li>

Upvotes: 1

Shan Robertson
Shan Robertson

Reputation: 2742

I would use ngIf for something like this, you can also use ngSwitch

<p ng-if="post.templateName == myTemplate"></p>
<p ng-if="post.templateName == myOtherTemplate"></p>

Upvotes: 1

Related Questions