Wie ng-if mit Tabelle zur Anzeige td basierend auf der Bedingung

Question

Mit Bezug auf den früheren Beitrag auf ng-if innerhalb DIV als Verweis den hier angegebenen Link :: Ng-If within DIV, aber wenn ich das gleiche mit ng versuchte -wenn innerhalb der Tabelle mit ng-Wiederholung auf td es scheint nicht gut zu funktionieren. Korrigiere mich, wenn ich falsch liege. Ich habe 2 Versuche gemacht, die Spalte basierend auf der Bedingung anzuzeigen, aber keine funktioniert. Unten habe ich den Code als Referenz angegeben. Könnte mir jemand dabei helfen? Bitte lassen Sie es wissen, wenn Sie weitere Informationen benötigen.

HTML

Try :: 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> 

Versuchen :: 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 sollte funktionieren für Ihre versuchen :: 1. Hier ist die Geige Arbeitsbeispiel

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

Answer 2

meisten Die Browser ignorieren alle anderen DOM-Elemente innerhalb einer Tabellenstruktur, wenn sie nicht gut gebildet sind. Was bedeutet, dass Sie in Ihrem oben genannten Code nicht div Tag innerhalb einer tr haben können. Versuchen Sie stattdessen

<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

Vermeiden innen mit zu besserer Browser Semantik einzuhalten. Wenn Sie nach Gleichheit suchen, ist '===' möglicherweise eine bessere Option, wenn Sie den Typ des Werts auf dem RHS des Gleichheitsausdrucks sicherstellen möchten.

Dies funktioniert sowohl für <table> und <div> individuell

<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/