7

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

kaiffeetasse
  • 481
  • 1
  • 8
  • 18
krhithm
  • 73
  • 1
  • 1
  • 4
  • stick your logic in a function – user1231232141214124 Nov 25 '15 at 21:16
  • 2
    possible dupe of http://stackoverflow.com/questions/18403835/how-to-make-less-than-or-greater-than-comparison-in-angularjs – m02ph3u5 Nov 25 '15 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 Nov 25 '15 at 21:20
  • 1
    Here's a [plunker](http://plnkr.co/edit/1ZmSjz?p=preview) with a working example. – adriancarriger Nov 25 '15 at 21:42
  • 1
    There's something else going on in your case. I've used GT/LT many times without issue. – isherwood Nov 25 '15 at 21:48
  • This can also happen when you use a SVG-document. The document will not bubble any input event (may it be a hover or click event) to the parent elements. For this case you can use the CSS property `pointer-events: none;` to stop any event going inside the SVG, so default bubbling will work. – nkmol Oct 04 '18 at 14:50

2 Answers2

11

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

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

</div>
user1532669
  • 2,288
  • 4
  • 36
  • 72
5

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>
Artem K.
  • 804
  • 6
  • 15