AngularJS：基于属性的模板中的变化

Question

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

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

人们可以使用纳克重复指令如下容易地创建模板，以输出数据：

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

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

根据item.type的值，能够改变模板的最佳方法是输出条形图中的所有项目吗？

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>