2016-08-22 1 views
0

Ok, zuerst möchte ich sagen, dass ich gerade mit eckigen anfange, also ist das wahrscheinlich eine sehr triviale Frage.Aktualisiere Variable nach jeder Iteration von ng-repeat

Lassen Sie uns sagen, ich habe js-Datei:

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


function MyCtrl($scope) { 
     $scope.pool=10; 
     $scope.array=[1,3,5] 

} 

und ng-repeat

<div ng-controller="MyCtrl"> 
    <div ng-repeat="x in array" ng-init="pool=pool-x"> 
     {{pool}} 
    </div> 
</div> 

In diesem Beispiel variable pool gleich 10 zu Beginn jeder Iteration und ich möchte es so aktualisiert werden, Das Ergebnis könnte 9,6,1 und nicht 9,7,5 sein. Wie zu erreichen, dass

Antwort

4

dies ein bekanntes pitfall in Winkel ist, Das Problem ist Winkel verwendet etwas wie scope inheritance bekannt, was bedeutet, dass jede Iteration von ng-repeat erstellt einen neuen Bereich mit einer Eigenschaft pool.

und das Ändern des Werts dieser Eigenschaft würde nur den inneren Bereich beeinflussen, da es sich um eine andere Variable handelt.

stattdessen sollten Sie eine Referenz auf einen Nicht-Grundwert (wie Object) verwenden:

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

 

 
function MyCtrl($scope) { 
 
    $scope.obj = { pool: 10 }; 
 
    $scope.pool = 10; 
 
    $scope.array = [1,3,5]; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <div ng-repeat="x in array" ng-init="pool=pool-x;obj.pool=obj.pool-x;newvar=obj.pool"> 
 
     {{pool}} *** {{newvar}} 
 
    </div> 
 
</div>

+1

Wow, danke. Ich rate, dass primitive Pool nicht mehr benötigt wird – user3713267

+1

Oh, das war nur für eine pädagogische Zwecke. Vielen Dank! – user3713267

0

ng-init wird nur einmal aufgerufen werden, der eine Initialisierung Richtlinie, so können Sie versuchen, diese habe ich nicht getestet, aber es sollte funktionieren:

// In you controller 
$scope.changePool = function(val) { 
    $scope.pool -= val; 
} 
<div ng-repeat="x in array; changePool(x)"> 
    {{pool}} 
</div> 

<!-- or this --> 
<div ng-repeat="x in array"> 
    {{changePool(x)}} 
</div> 
Verwandte Themen