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 insi

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/