CODEWITHSUNDEEP
javascriptangularjs
bluebrooklynbrim
bluebrooklynbrim

Reputation: 277

conditional counter with ng-repeat

I want to apply odd and even classes to "parent" rows. I want to know if there's a way to only increase the counter if it's a parent. Is there a way to do this inline? The way I've set it up doesn't seem to increment the counter.

...
<tbody ng-init="parentCount=0">
  <tr ng-repeat="value in finalArr"
      ng-class={'parentRow': value.isParent, 'childRow': !value.isParent}
      parentCount="{value.isParent ? parentCount = parentCount + 1}"
      ...
  >
    <td>
      id: {{ value.isParent ? parentCount : '' }}
    </td>
    ...
 </tr>
    ...
</tbody>
...

Upvotes: 2

Views: 917

Answers (1)

jian
jian

Reputation: 1256

UPDATE:

As pointed out by Daniel, I misunderstood the problem. The value object could be a parent or a child and you want to only increment the counter if it is a parent. Here is a solution that I can think of:

var app = angular.module("app", []);

app.controller('ctrl', ['$scope', function($scope) {
  $scope.counter = {
    parentCount: 0
  }
  
  $scope.incrementParent = function (item) {
    if (item.isParent) {
      $scope.counter.parentCount++
    }
    return $scope.counter.parentCount
  }
  
  $scope.items = [
    {name: 'a', isParent: true},
    {name: 'b', isParent: true},
    {name: 'c', isParent: false},
    {name: 'd', isParent: false},
    {name: 'e', isParent: true},
    {name: 'f', isParent: true},
  ]
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="item in items"  ng-init="count = incrementParent(item)">
    {{item.name}} - the parent count: {{item.isParent ? count : 'is a child'}}
  </div>
  
</div>

If you want to do it inline, you can compress the incrementParent function into one line (though I don't think it is very readable):

<div ng-repeat="item in items" ng-init="count = (item.isParent ? (counter.parentCount = counter.parentCount + 1) : counter.parentCount)">

Note:

I put the parentCount to an object because ng-repeat will create a new scope for each item. If you directly assign to parentCount in the template you will be modifying the child scope not the parent.

For each item we create a snapshot of the current parentCount value and assign it to a variable count in ng-init. If you directly use counter.parentCount for each item it will not work because they will all be the same value after the loop ends.

Original:

In the ng-repeat scope, there is an $index property available that can be used as the counter (just that it starts from 0). AngularJS maintains it so you don't have to increment it yourself. It's better just use that one.

Regards to why your counter is not incremented, "{value.isParent ? parentCount = parentCount + 1}" doesn't seem to be valid JavaScript syntax (for ternary operator you need the : part). I suspect it will throw and AngularJs will catch it and just ignore it. The parentCount attribute you added to td is not recognized by Angular. Angular only accept registered directives or bindings, not random attributes.

Upvotes: 3

Related Questions