Angular directive ng-if does not evaluate conditional statement

Question

I'm new to web dev and AngularJS. I'm trying to use the directive ng-if to only display a div block if a list returned from the database is greater than 1, but it's not working. Am I misusing the directive? I've looked around and haven't found any solutions that work. Currently, both divs are displayed and the ng-ifs are ignored.

<div>
    <div ng-if="listOfThings.length > 1">
        <h1> {{listOfThings.length}} </h1>
        </br>
        <div ng-repeat="thing in listOfThings">
           <label> {{ thing.name }} </label>
        </div>
    </div>
    <div ng-if="listOfThings.length == 1" class="col-sm-4 col-sm-offset-4">
        <h1> {{ listOfThings[0].name }} </h1>
        <iframe width="560" height="315" ng-src="{{ listOfThings[0].embed }}" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

I tried this code, which works in Plunker, but not in my code for some reason. In my code, only ng-app works, but ng-if still does not.

    <div ng-app="ngAnimate">
        Click me: <input type="text" ng-model="check" ng-init="check='show'" /><br/>
        Show when check: {{check}}
        <input ng-if="check!='hide'" class="animate-if" placeholder="type the word 'hide'"/>
    </div>

Dalorzo · Accepted Answer · 2014-06-11 19:58:23Z

8

What you want instead of this ng-if="{{listOfThings.length}} > 1" is this:

 ng-if="listOfThings.length>1"

ng-if will evaluate the expression.

Check this Online Demo

edited Jun 11, 2014 at 19:58

answered May 29, 2014 at 15:48

Dalorzo

20k7 gold badges57 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Soubriquet Over a year ago

I tried your suggestion and it still displays both divs.

Dalorzo Over a year ago

@Soubriquet there is plunker demo and it works how about you showing me your code

Soubriquet Over a year ago

Ok, so I copied the plunker code you linked into my html and the ng-if still does not work, but the np-app works. :/ I edited my original post to show the plunker code I tried.

Soubriquet Over a year ago

Never mind. Thanks for all the help. After looking at the Plunker code, I realized that I downloaded AngularJS 1.3.0 and I was loading in an older version. Thanks again. It works now.

Mathews · Accepted Answer · 2014-05-29 15:52:32Z

0

This should do

<div>
    <div ng-if="listOfThings.length > 1">
        <h1> {{listOfThings.length}} </h1>
        </br>
        <div ng-repeat="thing in listOfThings">
           <label> {{ thing.name }} </label>
        </div>
    </div>
    <div ng-if="listOfThings.length == 1" class="col-sm-4 col-sm-offset-4">
        <h1> {{ listOfThings[0].name }} </h1>
        <iframe width="560" height="315" ng-src="{{listOfThings[0].embed}}" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

answered May 29, 2014 at 15:52

Mathews

8991 gold badge7 silver badges13 bronze badges

1 Comment

Dalorzo Over a year ago

@Matthews, can you please explain how this add up to consider this is NOT a copy of the answer already posted?

Collectives™ on Stack Overflow

Angular directive ng-if does not evaluate conditional statement

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related