12

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>
Community
  • 1
  • 1
Arun
  • 1,010
  • 6
  • 18
  • 37
  • 1
    `it doesn't seems to work well.` can you elaborate? What does it (not) do? – Tim May 05 '14 at 06:10
  • Tables sometimes don't like divs inside trs. Try removing the divs, and putting the ng-if expression straight into the td tag. – Zack Argyle May 05 '14 at 06:12
  • @ZackArgyle in my first try i did the same but it doesn't work – Arun May 05 '14 at 06:16
  • @: Tim Castelijns need to display the column based on the condtion – Arun May 05 '14 at 06:17
  • 1
    `ngIf` adds and removes dom nodes based on the condition, you might want to try `ngShow` or `ngHide` instead which simply sets the element in question to `display: none`. – Kevin Stone May 05 '14 at 06:20
  • Works fine here: http://plnkr.co/edit/pBcnmkQkEoVCTArYG0q2?p=preview. You'll have to tell us more about your code, angular version, etc. Try to come up with a minimal plunkr reproducing the problem. And tell us precisely what happens. – JB Nizet May 05 '14 at 06:33

3 Answers3

13

ng-if should work for your try::1. Here is the fiddle working example

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

Shivaraj
  • 613
  • 3
  • 10
5

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>
ch4nd4n
  • 4,110
  • 2
  • 21
  • 43
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/

akskap
  • 803
  • 6
  • 12