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>

我的输出每次都是这样的。它只会显示＆＃34; 1＆＃34;：

 <div>counter: 1</div>

正确的console.logs（）;记录增量数字。但是，我的HTML输出只是＆＃34; 1＆＃34;每次。只输出$ index是不够的，因为我在increment()函数中进行了其他数学运算，$scope.counter将!= $index。public-address有什么想法吗？

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上的实例。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

Fiddle here

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

plunker is here。

AngularJS：在ng-repeat

4 个答案: