AngularJS：在ng-repeat中调用控制器函数

Question

我的控制器看起来像这样：

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

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

我的HTML看起来像这样：

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

我的输出每次都是这样。 它只会显示“ 1”：

 <div>counter: 1</div>

它console.logs（）正确； 记录增量编号。 但是，我的HTML输出每次都是“ 1”。 仅输出$ index是不够的，因为我正在使用我的increment()函数进行其他数学运算，而$scope.counter将是!= $index 。 有任何想法吗？

Answer 1

Plunker

“ 仅输出$ index是不够的，因为我正在我的increment（）函数中进行其他数学运算，而$ scope.counter将是！= $ index。有什么想法吗？ ”

您仍然可以通过以下方式使用$index ：

<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返回重复元素的迭代器偏移量（0..length-1）

Answer 2

您可以使用指令：

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> 

Answer 3

counter值是2-way绑定的，因此它将始终打印最后一个值。

使用$index将给出迭代器的偏移量。

尝试这个：

 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> 

在这里摆弄

Answer 4

您可以使用ng-init函数为每个项目设置一个值：

为了说明我们可以独立于索引来计算每个项目，这是一个为每个项目分配下一个斐波那契数的示例。

您的模板：

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

和代码：

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();
  }
}]);

结果是：

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

unk子在这里 。