Increment inside angular expression

Question

I am trying to show some divs (which are under 3+ ng-repeats) conditionally and then increment a counter variable which. The counter contributes in the conditions which decide the visibility of divs.

When I do something similar tong-show='foo++ < SOME_LIMIT' I get a syntax error:

Error: Syntax Error: Token 'undefined' not a primary expression at column NaN of the expression [moveItem.type != 'account' && team.rowCount++] starting at [moveItem.type != 'account' && team.rowCount++].

or

Error: Syntax Error: Token '2' is an unexpected token at column 42 of the expression [team.expandAccounts || team.rowCount++ < 2] starting at [2]

Giving the code doesn't seem to be required but still I am giving what I was trying. I tried something similar to:

<div ng-repeat='request in pagedRequests'
  <tr ng-repeat='(fooId, foo) in returnFoos(request)'>
    <td ng-init='foo.rowCount = 0'>
      {{foo.someAttribute}}
      <!--Here is just an icon shown when the rowCount reaches some limit, say 3.
          Uses ng-switch on foo.rowCount. Skipping this as this doesn't seem
          problematic. This toggles rows' collapsing using foo.expandRows.-->
      <div ng-repeat='bar in foo.bars'
           ng-show='foo.rowCount < 3 || foo.expandRows'>
        <span ng-show='bar.type=="multiRowBar"'
              ng-repeat='row in bar.rows'>
          <span ng-show="foo.expandRows || foo.rowCount++ < 3"> <!--SYNTAX ERROR!-->
            <!--Showing the nested objects with more ng-repeats.-->
        </span>
        <span ng-show='bar.type!="multiRowBar" && foo.rowCount++<3'>  <!--SYNTAX ERROR!-->
          <!-- This adds a single row per bar of this type.-->
        </span>
      </div>
    </td>
  </tr>
</div>

Is it that we can't use post/pre increment/decrement operators (like ++) inside angular expressions?

Could you make use of the $index object that you get when you use an ng-repeat? — Dan
– Dan, Commented Sep 20, 2013 at 9:03
@dskh: yes that would involve $parent.$index + $index < 3. I am just trying to avoid $parent in a template. — 0xc0de
– 0xc0de, Commented Sep 20, 2013 at 9:06
Also the icon which depends on the rowCount goes complex as it would then depend on child's index. — 0xc0de
– 0xc0de, Commented Sep 20, 2013 at 9:11
Why would you want to do this. Like any other expression in angular, the ng-show expression may get evaluate many times, hence you would have unwanted side effects. — Chandermani
– Chandermani, Commented Sep 20, 2013 at 10:11

Maxim Shoustin · Accepted Answer · 2013-09-20 09:49:06Z

2

Why just do not use method like:

<button ng-show='increaseFoo() < SOME_LIMIT'>press  me</button>

controller

$scope.SOME_LIMIT = 10;     
$scope.foo = 8; 

$scope.increaseFoo = function(){
    return $scope.foo++;
};

Fiddle

if $scope.foo = 8;, ng-show returns true

if $scope.foo = 9;, ng-show returns false

edited Sep 20, 2013 at 9:49

answered Sep 20, 2013 at 9:15

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

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

2 Comments

0xc0de Over a year ago

Seeing this after a long time, just want to clear that I am not the downvoter (it may seem from the fact that I myself have answered my question).

Bernardo Dal Corno Over a year ago

Upvoted, but would prefer a no-function solution and no-$index either (I'm trying to increment tabindex in a form, so the more controller-agnostic the better)

0xc0de · Accepted Answer · 2013-11-12 09:26:35Z

1

The question is a bit ignorant to the fact that such an effort triggers cyclic $digest calls which breaks. (Just for the sake of making some sense out of this question I'm giving my solution. Hope it will help someone trying this stuff) The solution I finalized involved flattening all the lists to a single list and switching to show the icon for a particular value of $index.

answered Nov 12, 2013 at 9:26

0xc0de

8,3575 gold badges52 silver badges78 bronze badges

Collectives™ on Stack Overflow

Increment inside angular expression

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related