javascript - AngularJS:ng-click for ng-repeat 一次获取所有数据

Question

我有我的简单 ng-repeat:

<div ng-repeat="x in names">
    <h4>{{x.productid}}</h4>
    <h4>{{x.newquantity}}</h4>
    <h4>{{x.total}}</h4>
    <button ng-click="addInfoAboutOrder(x)">Add Info</button>
</div>

和 AngularJS 函数:

$scope.addInfoAboutOrder = function(x) {
        $scope.productId = x.productid;
        $scope.productQuantity = x.newquantity;
        $scope.total = x.total;

        $http.post("api/setOrdersInfo" + "/" + $scope.productId + "/" + $scope.productQuantity + "/" + $scope.total)

    }

目前它正在工作。然而，ng-repeat 会根据数据的多少次打印按钮(从 1 到 50 次)。当然这可以通过添加一个简单的过滤器来完成，但这并不能解决我的问题。最大的问题是它只在数据库的表中添加一行。我的问题是我无法制作一个

<button ng-click="addInfoAboutOrder(x)">Add Info</button>

处理 ng-repeat 中的所有数据。我想通过一键单击在数据库中添加与 ng-repeat 中一样多的数据。

Answer 1

将按钮移到 ng-repeat 之外:

<div ng-repeat="x in names">
  <h4>{{x.productid}}</h4>
  <h4>{{x.newquantity}}</h4>
  <h4>{{x.total}}</h4>
</div>
<button ng-click="addInfoAboutOrder(names)">Add Info</button>

然后传入 names 而不是 x 并迭代 names 以从中获取所有数据，从而生成一个 $http 每次迭代的请求(请注意，这很可能会导致大型数据集的性能问题，因此您应该尝试找到更好的解决方案来完成您想要的操作):

$scope.addInfoAboutOrder = function(names) {

    for (var i = 0; i < names.length; i++) {

       $http.post("api/setOrdersInfo" + "/" + names[i].productid + "/" + names[i].newquantity + "/" + names[i].total);
    }
}