Angular js foreach 仅返回数组中的最后一项

Question

我正在尝试使用angular.forEach() 从 JSON 返回每个项目对象并评估其值，但只返回最后一个项目。因此，我无法进行任何评估。有趣的是，如果我使用console.log()，它会一个一个地显示每个项目。

我怎样才能得到每个项目并评估它们？

如果你知道更好的方法，请教我。

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>

非常感谢

Answer 1

您实际上不需要 forEach 循环来实现：

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

这应该可以完成工作。请注意，这只会显示数量，如果您想在模型中更改它（如果您必须发回刚刚评估的数据），您应该更改控制器中的数据：

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

  });

这应该在您的 $scope.items 对象中添加一个新行，其中 amountChecker 将分配给每个项目。 然后，在您的 ng-repeat 中，您还可以显示该值：item.amountChecker。

这一次，它将调用每个项目的属性amountChecker，而不是存储在$scope.amountchecker中的最后一个值。

请注意，Goodzilla 实际上是在评论中以更短的方式回答的：)

Answer 2

在循环到$scope.items 的每次迭代中，您似乎都覆盖了$scope.amountchecker。如果$scope.items 有一个amount 为500 的项目，然后是一个amount 为650 的项目，$scope.amountchecker 最终将设置为“平均”，因为 650 是循环中遇到的最后一个项目的数量。

解决方案取决于您是否真的希望amountchecker 基于所有项目或单个项目。如果是后者，您将更改您的行，例如：

$scope.amountchecker = 'low';

到

item.amountchecker = 'low';