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 directive