Angular directive ng-if does not evaluate conditional statement
angular-ng-if, angularjs, html, javascript
Solution
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
Problem
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> ```