AngularJS：NG-重复内部呼叫控制器功能

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

“就输出$指数是不够的，因为我在我的增量（）函数做其他的数学和$ scope.counter会！= $指数。任何想法？”

，您仍然可以使用$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; 
} 

点

$索引 iterator返回偏移绑定因此它将所有的时间打印最后一个值重复元件（0..length-1）

Answer 2

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 3

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

为了证明我们可以计算出每个项目独立于索引，这里是一个分配eac的例子h输入下一个斐波那契数字。

您的模板：

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

Answer 4

您可以使用指令：

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