如何使用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/