javascript - 如何在AngularJS中的ng-repeat中动态格式化表格

Question

我有一个不同类型的项目列表，我想在表格中显示它们。一种类型的项目将有两列，而另一种类型的项目只有一个。有什么建议可以有条件地更改 <> 标签上的 colspan 吗？

 <div ng-init="items = [
    {name:'item1', old:1, new:2}, 
    {name:'item2', old:2, new:2},
    {name:'item3', msg: 'message'},
    {name:'item4', old:0, new:2}
  ]">
  <table border=1>    
    <tr  ng-repeat="item in items" >                   
     <th>{{item.name}}</th>
     <td>{{item.old}}</td>  
     <td colspan='2'>{{item.msg}}</td>     
     <td>{{item.new}}</td>      
    </tr>              
 </table>

这是在 jsfiddle 中播放的示例：http: //jsfiddle.net/38LXt/1/

谢谢！

Answer 1

您可以使用条件指令（例如 ng-show）来执行以下操作：

<table border=1>    
   <tr  ng-repeat="item in items" >                   
      <th>{{item.name}}</th>
      <td>{{item.old}}</td>  
      <td colspan="2" ng-show="item.type == 'typeA'">{{item.msg}}</td>
      <td ng-show="item.type == 'typeB'">{{item.msgB1}}</td>     
      <td ng-show="item.type == 'typeB'">{{item.msgB2}}</td>          
      <td>{{item.new}}</td>      
   </tr>              
</table>

关于 ng-show 的更多信息：

ngShow 指令