AngularJS : Variations in a template based on a attribute

Question

Say I have a controller in an AngularJS web app which has a data array that stores objects which are very similar but require a different template depending a member variable 'type'. For example :

function fooCtrl($scope) {
    $scope.bar = [
        {"name": "example 1",
         "type": "egType1",
         "text": "Some example text"},
        {"name": "example 2",
         "type": "egType2",
         "text": "Some example text"},
        {"name": "example 3",
         "type": "egType3",
         "text": "Some example text"},
    ];
}

One could easily create a template to output the data using the ng-repeat directive as follows :

<ul>
    <li ng-repeat="item in bar">
        {{item.name}}
        <p>{{item.text}}</p>
    </li>
</ul>

However this will result in each item having the same display.

What is the best method to output all the items in bar while being able to vary the template depending on the value of item.type?

Answer 1

I suppose you can use ngSwitch directive, with something like this:

<li ng-repeat="item in bar">
    <div ng-switch on="item.type">
        <div ng-switch-when="egType1">
            {{item.name}}
            <p>{{item.text}}</p>
        </div>
        <div ng-switch-when="egType2">
            XXX {{item.name}}
            <span>{{item.text}}</spab>
        </div>
        <div ng-switch-default>
            DEFAULT {{item.name}}
            <span>{{item.text}}</spab>
        </div>
    </div>
</li>