Angular js foreach restituisce solo l'ultimo elemento nell'array

Question

Sto provando a restituire ogni oggetto oggetto da un JSON e valutarne il valore, con angular.forEach(), ma viene restituito solo l'ultimo elemento. E a causa di ciò non posso eseguire alcuna valutazione. Abbastanza divertente, se faccio console.log(), mostra ogni elemento, uno per uno.

Come posso ottenere ogni articolo e valutarli?

Se conosci un modo migliore, per favore insegnami.

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> 

Molte grazie

Answer 1

In realtà non è necessario un ciclo foreach per raggiungere questo:

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

Che dovrebbe fare il lavoro Si noti che questo visualizzerà solo la quantità, se si vuole cambiare nel modello (se si dispone di rispedire dati appena analizzato), è necessario modificare i dati nel controllore:

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

    }); 

Questo aggiungere una nuova riga nell'oggetto $ scope.items, dove amountChecker verrà assegnato a ciascun elemento. Quindi, nella tua ng-repeat, puoi anche visualizzare quel valore: item.amountChecker.

Questa volta, chiamerà la proprietà amountChecker di ogni articolo invece dell'ultimo valore memorizzato in $ scope.amountchecker.

Nota che Goodzilla effettivamente risposto in commento, in una via più breve :)

Answer 2

in cui sembra essere sovrascrivere $scope.amountchecker in ogni iterazione del ciclo attraverso $scope.items. Se $scope.items aveva un articolo con amount di 500 seguito da uno con amount di 650, $scope.amountchecker finirebbe per essere impostato su "media" poiché 650 è la quantità dell'ultimo elemento rilevato nel ciclo.

La soluzione dipende dal fatto che si desideri effettivamente che amountchecker sia basato su tutti gli elementi o su un singolo elemento. In quest'ultimo caso, si dovrebbe cambiare le linee come:

$scope.amountchecker = 'low'; 

Per

item.amountchecker = 'low';