如何使用ng-if与表格根据条件显示td

Question

参照ng上的早期文章 - 如果DIV 仅供参考，此处给出的链接:: Ng-If within DIV，但是当我尝试使用ng如果在td里面用ng-repeat表格，它似乎不能很好地工作。纠正我，如果我错了我做了2尝试根据条件显示列，但没有任何作品。下面我给出了参考代码。有人能帮我解决这个问题吗？请让我们知道您是否需要更多的澄清。

HTML

尝试:: 1

<table> 
     <tr ng-repeat = "data in comments"> 
      <td ng-if="data.type == 'hootsslllll' "> 
      //differnt template with hoot data 
      </td> 
      <td ng-if="data.type == 'story' "> 
      //differnt template with story data 
      </td> 
      <td ng-if="data.type == 'article' "> 
      //differnt template with article data 
      </td> 
     </tr> 

    </table> 

尝试:: 2

<table> 
    <tr ng-repeat = "data in comments"> 
     <div ng-if="data.type == 'hootsslllll' "> 
      <td> //differnt template with hoot data </td> 
     </div> 
     <div ng-if="data.type == 'story' "> 
      <td> //differnt template with story data </td> 
     </div> 
     <div ng-if="data.type == 'article' "> 
      <td> //differnt template with article data </td> 
     </div> 
    </tr> 
</table> 

Answer 1

ng-if应当为你的工作尝试:: 1。这里是小提琴工作示例使用内部坚持更好的浏览器语义

http://jsfiddle.net/shivaraj/n3xWB/

Answer 2

大多数如果表格结构不正确，浏览器将忽略表格结构中的任何其他DOM元素。这意味着，在上面的代码中，tr内不能有div标记。试试这个

<table> 
    <tr ng-repeat = "data in comments"> 
    <td ng-if="data.type == 'hootsslllll' "> //differnt template with hoot data </td> 
    <td ng-if="data.type == 'story' "> //differnt template with story data </td> 
    <td ng-if="data.type == 'article' "> //differnt template with article data </td> 
    </tr> 
</table> 

Answer 3

避免。而且，当检查等号'==='可能是更好的选择时，如果你想确保等式表达式的RHS上的值的类型。

这同时适用于<table>和<div>单独

<div ng-controller="tableCtrl"> 
     <div ng-repeat="data in comments"> 
      <div ng-if="data.type === 'hootsslllll' ">//differnt template with hoot data</div> 
      <div ng-if="data.type === 'story' ">//differnt template with story data</div> 
      <div ng-if="data.type === 'article' ">//differnt template with article data</div> 
     </div> 
</div> 

http://jsfiddle.net/Mu6T6/3/