How to use ng-if with table to display td based on the condition

Question

With reference to the earlier post on ng-if within DIV for reference the link given here :: Ng-If within DIV , however when i tried the same with ng-if inside table with ng-repeat on td it doesn't seems to work well. Correct me if I'm wrong I made 2 tries to display the column based on the condition but none works. Below i have given the code for reference. Could somebody help me on this. Kindly let know if you need more clarification.

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>

Try :: 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 should work for your try::1. Here is the fiddle working example

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

Answer 2

Most of the browsers will ignore any other DOM elements within a table structure if it is not well formed. Which implies, in your above code you cannot have div tag within a tr. Try this instead

<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

Avoid using inside to adhere to better browser semantics. Moreover, when checking for equality '===' may be a better option, if you want to ensure the type of the value on the RHS of the equality expression.

This works for both <table> and <div> individually

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