Geek asks and answers

AngularJS: attribute based template variations

Let's say I have a controller in an AngularJS web application that has a data array that stores objects that are very similar, but require a different template depending on the type member variable. For instance:

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"},
    ];
}

You can easily create a template for outputting 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 way to display all items in a panel when changing a template depending on the value of item.type?

+5
source share
1 answer

I suppose you can use the 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>
+11
source

More articles:


All Articles