AngularJS: calling controller function inside ng-repeat

Question

My controller looks something like this:

controller('MonthlyCalendarController', ['$scope', function($scope) {
    $scope.counter = 0;

    $scope.increment = function() {
        $scope.counter++;
        console.log($scope.counter);
    }
 }])

My HTML looks something like this:

 <div ng-repeat="x in y track by $index" ng-init="increment()">
counter: {{counter}}
 </div>

My output looks like this every time. It only ever shows "1":

 <div>counter: 1</div>

It console.logs() correctly; logging incremental numbers. However, my HTML output is only "1" every time. Just outputting $index will not suffice, as I'm doing other math in my increment() function, and $scope.counter will != $index. Any ideas?

what are you trying to achieve that lead you to try this approach? — Louie Almeda
– Louie Almeda, Commented Feb 10, 2016 at 5:16
I'm building a calendar, but the ng-repeat really has nothing to do with the function to be called. I just need the function called every time the repeat happens. That's why I just used 'x in y' in my ng-repeat; just to illustrate the concept. But to elaborate a bit, this is the 'day' in the calendar, and depending on the value of calendar, different things will show in that 'day'. — Brent
– Brent, Commented Feb 10, 2016 at 5:34

Vicky Gonsalves · Accepted Answer · 2016-02-10 05:17:06Z

4

Plunker

"Just outputting $index will not suffice, as I'm doing other math in my increment() function, and $scope.counter will != $index. Any ideas?"

You can still use $index this way:

<div ng-repeat="x in y track by $index">
  counter: {{increment($index)}}
</div>

JS:

$scope.increment=function(counter){
    $scope.counter=++counter;
    // do your stuff with $scope.counter
    return $scope.counter;
}

$index returns iterator offset of the repeated element (0..length-1)

edited Feb 10, 2016 at 5:17

answered Feb 10, 2016 at 5:07

Vicky Gonsalves

11.8k3 gold badges39 silver badges58 bronze badges

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

1 Comment

Brent Over a year ago

Calling the function in brackets instead of ng-init() seems to have solved my problem. Thanks!

Stepan Kasyanenko · Accepted Answer · 2016-02-10 09:41:22Z

You can use directive:

Live example on jsfiddle.

var myApp = angular.module('myApp', []);
myApp.controller('MonthlyCalendarController', MonthlyCalendarController);

function MonthlyCalendarController($scope) {
  $scope.y = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  $scope.counter = 0;
  $scope.increment = function() {
        $scope.counter++;
        console.log($scope.counter);
    }
}

myApp.directive('increment',function(){
  return {
    restrict:'A',
    transclude:true,
    scope:{
      increment:"=",
      innerIncrement:"=",
    },
    template: '<span ng-transclude></span>',
    link:function(scope,elem,attr){
     scope.$parent.increment = scope.increment;
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MonthlyCalendarController">
    <div ng-repeat="x in y track by $index" ng-init="increment()" increment="counter">
    counter {{increment}}
    </div>
  </div>
</div>

Rayon · Accepted Answer · 2016-02-10 05:12:28Z

counter value is 2-way binded hence it will print last value all the time.

Use $index which will give offset of the iterator.

Try this:

var myApp = angular.module('myApp', []);
myApp.controller('MonthlyCalendarController', MonthlyCalendarController);

function MonthlyCalendarController($scope) {
  $scope.y = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  $scope.counter = 0;

  $scope.increment = function() {
    $scope.counter++;
    console.log($scope.counter);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MonthlyCalendarController">
    <div ng-repeat="x in y track by $index" ng-init="increment()">
      counter: {{$index+1}}
    </div>
  </div>
</div>

Fiddle here

Andrew Shepherd · Accepted Answer · 2016-02-10 05:31:21Z

You can use your ng-init function to set a value on each item:

To demonstrate that we can calculate each item independentally of the index, here's an example which assigns each item the next fibonacci number.

Your template:

  <div ng-repeat="x in y track by $index" ng-init="increment(x)">
      <strong>{{x.counter }}</strong>: {{ x.name}} 
  </div>

And the code:

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

app.controller('MonthlyCalendarController', ['$scope', function($scope) {

  $scope.y = [{
    name: "One"
  }, {
    name: "Two"
  }, {
    name: "Three"
  }, {
    name: "Four"
  }, {
    name: "Five"
  }];

  var counter = 0;

  var getNextFibonacciNumber = (function() {
    var seq = [0, 1];
    return function() {
      seq = [seq[1], seq[0] + seq[1]];
      return seq[1];
    };
  })();

  $scope.increment = function(item) {
    item.counter = getNextFibonacciNumber();
  }
}]);

Results in:

1: One
2: Two
3: Three
5: Four
8: Five

The plunker is here.

Collectives™ on Stack Overflow

AngularJS: calling controller function inside ng-repeat

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related