Angular js foreach zwraca tylko ostatni element w tablicy

Question

Próbuję zwrócić każdy obiekt typu z JSON i ocenić jego wartość, z angular.forEach(), ale zwracany jest tylko ostatni element. A z tego powodu nie mogę przeprowadzić żadnej oceny. Co zabawne, jeśli wykonam console.log(), pokaże każdy przedmiot, jeden po drugim.

Jak mogę uzyskać każdy przedmiot i dokonać jego oceny?

Jeśli znasz lepszy sposób, proszę, naucz mnie.

JS (angularjs):

angular.module('bLiApp') 
    .controller('AddDataCtrl', ['$scope', 'DataService', function ($scope, DataService) { 

    DataService.getItems().success(function(data) { 

     $scope.items = data.category.items; 

     angular.forEach($scope.items, function(item) { 

     // This is where I'm having problem with return data... 
     if (item.amount < 600) { 
      $scope.amountchecker = 'low'; 
     } else if (item.amount >= 600 && item.amount <= 650) { 
      $scope.amountchecker = 'average'; 
     } else if (item.amount > 650) { 
      $scope.amountchecker = 'too high'; 
     } 

     }); 
    }); 
    }]); 

HTML (angularjs):

<div class="add-data" ng-controller="AddDataCtrl"> 
    <div class="data-box clearfix" ng-repeat="item in items"> 
    <article class="item"> 
     <p>{{amountchecker}}</p> 
     <p><span class="month">{{ item.month.substring(0, 3) }}</span></p> 
     <p class="cost">{{item.cost | currency:"&pound;"}}</p> 
    </article> 
    </div> 
</div> 

Dziękujemy

Answer 1

rzeczywiście nie potrzebują pętli foreach do osiągnięcia tego celu:

<div class="add-data" ng-controller="AddDataCtrl"> 

<div class="data-box clearfix" ng-repeat="item in items"> 
    <article class="item"> 
     <p> 
     <span ng-if="item.amount < 600">Low</span> 
     <span ng-if="item.amount >= 600 && <= 650">Average</span> 
     <span ng-if="item.amount < 650">Too high</span> 
     </p> 
     <p><span class="month">{{ item.month.substring(0, 3) }}</span></p> 
     <p class="cost">{{item.cost | currency:"&pound;"}}</p> 
    </article> 
    </div> 
</div> 

To powinien wykonać to zadanie. Zauważ, że będzie wyświetlać tylko kwotę, jeśli chcesz, aby zmienić go w modelu (jeśli trzeba odesłać dane po prostu analizowany), należy zmienić dane w kontrolerze:

angular.forEach($scope.items, function(item) { 
    item.amountChecker; // declare a new property for each item in $scope.items 
    // then we set the value for each item 
    if (item.amount < 600) { 
     item.amountChecker = 'low'; 
    } else if (item.amount >= 600 && item.amount <= 650) { 
     item.amountChecker = 'average'; 
    } else if (item.amount > 650) { 
     item.amountChecker = 'too high'; 
    } 

    }); 

ten powinien dodać nową linię do twojego obiektu $ scope.items, gdzie kwotaChecker zostanie przypisana do każdej pozycji. Następnie, w powtórzeniu ng, możesz również wyświetlić tę wartość: item.amountChecker.

Tym razem wywoła właściwość amountChecker każdego elementu zamiast ostatniej wartości przechowywanej w $ scope.amountchecker.

Zauważ, że Goodzilla faktycznie odpowiedział w komentarzu, w krótszej drodze :)

Answer 2

pojawiasz się nadpisywania $scope.amountchecker w każdej iteracji pętli $scope.items. Jeśli $scope.items ma element o numerze amount z 500, a następnie jeden z amount z 650, $scope.amountchecker zostanie ustawiony na "średni", ponieważ 650 jest ilością ostatniego elementu napotkanego w pętli.

Rozwiązanie zależy od tego, czy rzeczywiście chcesz, aby amountchecker było oparte na wszystkich elementach lub pojedynczym elemencie. Jeśli to drugie, to zmienić swoje linie takie jak:

$scope.amountchecker = 'low'; 

Aby

item.amountchecker = 'low';