CODEWITHSUNDEEP
angularjsangular-ng-if
user3178175
user3178175

Reputation: 3

Angularjs ng-if stop rendering div

I'm learning AngularJS and I want to enclose a div inside another one only when $index == 2.

This is my code:

<span ng-repeat="element in [0,1,2,3]">
    <div ng-if="$index == 2"> 
        <div> I'm the div
    </div>                  
    <div>
         My element: {{element}} - Index: {{$index}}
    </div>      
    <div ng-if="$index == 2"> 
        </div> I'm the /div
    </div>
</span>

Fiddle: http://jsfiddle.net/2prRw/3/

The problem

"My element: 0", "My element: 1" and "My element: 3" are never shown.

The result is:

I'm the div
My element: 2 - Index: 2
I'm the /div

Thanks!

Edit

The expected result is:

   span
     div
         My element: 0
     /div
     div
         My element: 1
     /div
     div
         div
            My element: 2
         /div
     /div
     div
         My element: 3
     /div
   /span

Upvotes: 0

Views: 3566

Answers (1)

JB Nizet
JB Nizet

Reputation: 691755

Workaround, but which causes some duplication:

<span ng-repeat="element in [0,1,2,3]">
    <div ng-if="$index == 2"> 
        <div> I'm the div
            <div>
                My element: {{element}} - Index: {{$index}}
            </div>      
        </div> I'm the /div
    </div>
    <div ng-if="$index != 2">
        My element: {{element}} - Index: {{$index}}
    </div>
</span>

JSFiddle

Upvotes: 2

Related Questions