javascript - AngularJS : Variations in a template based on a attribute - Stack Overflow

admin管理员组

文章数量:1336207

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?

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?

• javascript
• angularjs

Share Follow edited Mar 26, 2015 at 19:31 cubiclewar asked Aug 15, 2012 at 11:11 cubiclewarcubiclewar 1,57944 gold badges2020 silver badges3737 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

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>

本文标签： javascriptAngularJSVariations in a template based on a attributeStack Overflow