javascript - AngularJS：基于属性的模板变体

Question

假设我在 AngularJS Web 应用程序中有一个控制器，它有一个数据数组，用于存储非常相似但需要不同模板的对象，具体取决于成员变量“类型”。例如 ：

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

可以使用 ng-repeat 指令轻松创建一个模板来输出数据，如下所示：

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

但是，这将导致每个项目具有相同的显示。

在能够根据 item.type 的值改变模板的同时输出 bar 中所有项目的最佳方法是什么？

Answer 1

我想您可以使用ngSwitch指令，如下所示：

<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>