Is it possible to use the 'greater than' comparator in an ng-if in HTML? The problem is that the ">" symbol prematurely closes the HTML tag.

ex. this: <div ng-if="foo>0" class="bar"> (HTML STUFF) </div>

is read as: <div ng-if="foo"> (0 class="bar"> HTML STUFF) </div>

I ended up getting around this by using ng-if="foo!=0" but I could probably use the less than comparator instead but I was just curious in case I absolutely HAD to use the greater than symbol for some reason. Or would I perhaps have to move this logic somewhere else like in my controller instead of in my view?

EDIT 1 So it definitely seems like the comparator itself isn't the problem and something else is going on in my code. Oddly, when I have spaces before and after the comparator it works but without spaces it doesn't. I'm also using angular 1.3.15 if that means anything.

<div class="paginate" ng-if="list.total > 0"> works

<div class="paginate" ng-if="list.total>0"> does not work

Is it possible to use the 'greater than' comparator in an ng-if in HTML? The problem is that the ">" symbol prematurely closes the HTML tag.

ex. this: <div ng-if="foo>0" class="bar"> (HTML STUFF) </div>

is read as: <div ng-if="foo"> (0 class="bar"> HTML STUFF) </div>

I ended up getting around this by using ng-if="foo!=0" but I could probably use the less than comparator instead but I was just curious in case I absolutely HAD to use the greater than symbol for some reason. Or would I perhaps have to move this logic somewhere else like in my controller instead of in my view?

EDIT 1 So it definitely seems like the comparator itself isn't the problem and something else is going on in my code. Oddly, when I have spaces before and after the comparator it works but without spaces it doesn't. I'm also using angular 1.3.15 if that means anything.

<div class="paginate" ng-if="list.total > 0"> works

<div class="paginate" ng-if="list.total>0"> does not work

• javascript
• html
• angularjs
• angular-ng-if

• stick your logic in a function – user1231232141214124 Commented Nov 25, 2015 at 21:16
• 2 possible dupe of stackoverflow.com/questions/18403835/… – m02ph3u5 Commented Nov 25, 2015 at 21:18
• 3 "The problem is that the ">" symbol prematurely closes the HTML tag.". No, it doesn't. Why do you think so? – dfsq Commented Nov 25, 2015 at 21:20
• 1 Here's a plunker with a working example. – adriancarriger Commented Nov 25, 2015 at 21:42
• 1 There's something else going on in your case. I've used GT/LT many times without issue. – isherwood Commented Nov 25, 2015 at 21:48

2 Answers 2

This is an example of using the > symbol. This works fine.

<div ng-if="myvariable.length > 2">

</div>

I recommend creating a method on the scope and abstracting the logic of the condition. The business rules may expand and change. With a separate method you don't need to alter the template.

// in controller
$scope.isValidFoo = function () {
    return $scope.foo > 0;
}

// in template
<div ng-if="isValidFoo()">...</div>