web-dev-qa-db-de.com

Angular js foreach gibt nur das letzte Element im Array zurück

Ich versuche, jedes Elementobjekt von einem JSON zurückzugeben und seinen Wert mit der angular.forEach() auszuwerten, aber nur das letzte Element wird zurückgegeben. Aus diesem Grund kann ich keine Auswertung durchführen. Wenn ich console.log() mache, wird jedes Element einzeln angezeigt. 

Wie kann ich jeden Artikel bekommen und bewerten?

Wenn Sie einen besseren Weg kennen, bringen Sie es mir bitte bei.

JS (anglejs):

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 (anglejs):

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

Danke vielmals

javascriptangularjsforeachangularjs-scope
7
Shaoz

Um dies zu erreichen, benötigen Sie eigentlich keine forEach-Schleife:

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

Das sollte den Job machen. Beachten Sie, dass dies wird nur angezeigt den Betrag, wenn Sie ihn im Modell ändern möchten (wenn Sie Daten zurücksenden müssen, die Sie gerade ausgewertet haben), sollten Sie die Daten in der Steuerung ändern:

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

  });

Dies sollte eine neue Zeile in Ihrem $ scope.items-Objekt hinzufügen, in der jedem Element ein heightChecker zugewiesen wird. Dann können Sie in Ihrem Wiederholungsreport auch diesen Wert anzeigen: item.amountChecker . 

Diesmal ruft es die Eigenschaft heightChecker aller Elemente auf, anstatt den letzten in $ scope.amountchecker gespeicherten Wert.

Beachten Sie, dass Goodzilla auf eine kürzere Art und Weise in Kommentaren geantwortet hat :)

5
enguerranws

Sie scheinen $scope.amountchecker in jeder Iteration der Schleife durch $scope.items zu überschreiben. Wenn $scope.items ein Element mit amount von 500 gefolgt von einem mit amount von 650 hätte, würde $scope.amountchecker auf "Durchschnitt" gesetzt werden, da 650 die Menge des zuletzt in der Schleife angetroffenen Elements ist. 

Die Lösung hängt davon ab, ob amountchecker tatsächlich auf allen Elementen oder einem einzelnen Element basieren soll. In letzterem Fall würden Sie Ihre Zeilen wie folgt ändern:

$scope.amountchecker = 'low';

Zu

item.amountchecker = 'low';
1
Chris Peacock