Angular: Differing HTML templates within an ng-repeat

Question

I want to use a different template within a repeated block based on the type of data that I am repeating. In my example, the array could contain data or it could contain tweet objects from Twitter. Currently my code looks like this...

<ul data-ng-hide="sourceIsTwitter()" collapse="!showStrings">
    <li data-ng-repeat="matchedString in matches">{{matchedString}}</li>
</ul>
<ul data-ng-show="sourceIsTwitter()" collapse="!showStrings">
    <li data-ng-repeat="tweet in matches">
        {{ tweet.text }} 
        <i>{{ tweet.user.name }}</i>
        <a href="{{ tweetUrl(tweet) }}">{{ formatDateFromTwitter(tweet.created_at) }}</a>
    </li>
</ul>

... and throws lots of errors when the content source isn't Twitter. How should I restructure this to use the right template based on the type of the object? Assume that matches is an array of objects and each object has a property type that I can check.

Justin Niessner · Accepted Answer · 2014-10-01 20:43:29Z

2

You would probably be best served by the ngSwitch directive:

<li data-ng-repeat="obj in matches" data-ng-switch="obj.type">
    <span data-ng-switch-when="twitter"><!-- Do Twitter Rendering --></span>
    <span data-ng-switch-when="facebook"><!-- Do Facebook Rendering --></span>
    <span data-ng-switch-when="foo"><!-- Do Foo Rendering --></span>
</li>

answered Oct 1, 2014 at 20:43

Justin Niessner

246k40 gold badges416 silver badges546 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fordio · Accepted Answer · 2014-10-01 20:57:09Z

1

I had this situation with lots of possible templates - which made ng-switch a bit clunky looking. I put each template in it's own html file and used ng-include with a scope function to retrieve the correct template name:

<ul>
    <li data-ng-repeat="match in matches">
        <div ng-include="getTemplate(match)"></div>
    </li>
</ul>

answered Oct 1, 2014 at 20:57

Fordio

3,8902 gold badges16 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular: Differing HTML templates within an ng-repeat

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related