Javascript Angular js foreach 只返回数组中的最后一项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25886495/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular js foreach only returning last item in array
提问by Shaoz
I'm trying to return each item object from a JSON and evaluate its value, with the angular.forEach(), but only the last item is returned. And due to that I can't perform any evaluation. Funny enough, if I do console.log(), it shows each item, one by one.
我正在尝试从 JSON 返回每个项目对象并使用 评估其值angular.forEach()，但只返回最后一个项目。因此，我无法进行任何评估。有趣的是，如果我这样做了console.log()，它会一个一个地显示每个项目。
How can I get each item and evaluate them?
我如何获得每个项目并对其进行评估？
If you know of a better way, please teach me.
如果你知道更好的方法，请教我。
JS (angularjs):
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):
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:"£"}}</p>
</article>
</div>
</div>
Many thanks
非常感谢
采纳答案by enguerranws
You actually don't need a forEach loop to achieve that :
您实际上不需要 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:"£"}}</p>
</article>
</div>
</div>
That should do the job. Note that this will only displaythe amount, if you want to change it in the model (if you have to send back data you just evaluated), you should change the data in the controller :
那应该可以完成这项工作。请注意，这只会显示数量，如果您想在模型中更改它（如果您必须发回刚刚评估的数据），您应该更改控制器中的数据：
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';
}
});
This should add a new line in your $scope.items object, where amountChecker will be assigned to each item. Then, in your ng-repeat, you can also display that value : item.amountChecker.
这应该在您的 $scope.items 对象中添加一个新行，其中 amountChecker 将分配给每个项目。然后，在您的 ng-repeat 中，您还可以显示该值： item.amountChecker。
This time, it will call the property amountChecker of each items instead of the last value stored in $scope.amountchecker.
这一次，它将调用每个项目的属性 amountChecker 而不是 $scope.amountchecker 中存储的最后一个值。
Note that Goodzilla actually answered in comment, in a shorter way :)
请注意，Goodzilla 实际上在评论中以较短的方式回答了 :)
回答by Chris Peacock
You appear to be overwriting $scope.amountcheckerin every iteration of the loop through $scope.items. If $scope.itemshad an item with amountof 500 followed by one with amountof 650, $scope.amountcheckerwould end up being set to 'average' as 650 is the amount of the last item encountered in the loop.
您似乎$scope.amountchecker在通过$scope.items. 如果$scope.items有一个amount500的项目后跟一个amount650 的项目，$scope.amountchecker最终将被设置为“平均”，因为 650 是循环中遇到的最后一个项目的数量。
The solution depends on whether you actually want amountcheckerto be based on all items or a single item. If the latter, you would change your lines such as:
解决方案取决于您是真正想要amountchecker基于所有项目还是单个项目。如果是后者，您将更改您的线路，例如：
$scope.amountchecker = 'low';
To
到
item.amountchecker = 'low';
