使用 AngularJS 将输入值从 ng-repeat 推送到数组中答案

【问题标题】：Pushing input values from ng-repeat into array with AngularJS使用 AngularJS 将输入值从 ng-repeat 推送到数组中
【发布时间】：2017-07-09 19:36:43
【问题描述】：

我有一个ng-repeat 显示一个产品列表，每个产品都有一个输入。我希望能够将每个输入的值与每个项目的参数一起推送到一个新数组中以创建订单。

到目前为止，我设法单独完成，但不是一起完成。

这是我的 HTML：

<div ng-repeat="pa in products">
  <div>
    <h2>{{pa.nom}}</h2>
    <input type="number" ng-model="basket" min="0" max="20" step="1" ng-init="basket=0">
  </div>
</div>
<a ng-click="insert(pa.nom,basket)">Add items</a>

以及功能：

$scope.singleorder = [];

$scope.insert = function(nom, basket){
  $scope.singleorder.push({
    'product': nom,
    'number': basket
  });
  console.log($scope.singleorder);
}

我认为问题与跟踪每次重复时输入的不同模型有关，但我不知道如何处理。

我还尝试在输入上使用ng-change 单独添加每个项目，但它会在每次更改时推送一个对象，在每次更改时复制项目，所以它不起作用。

有什么建议吗？

【问题讨论】：

你的add items按钮在ng-repeat里面吗？
@PrasanthBendra 不，不是。
那你如何决定要推送到数组中的项目？
@PrasanthBendra 这就是我认为的问题。我想将它们全部推送，每个项目一个对象，包含名称（nom）和数量（basket）。

标签： javascript angularjs arrays angularjs-ng-repeat

【解决方案1】：

诀窍是为ng-repeat 中的每个重复元素输入。

<div ng-repeat="pa in products">
    {{pa.nom}}
    <input type="number" ng-model="pa.basket">
</div>
<a ng-click="insert()">Add items</a>

insert() 将遍历产品并在设置篮子后插入singleOrder：

$scope.insert = function() {
    for (var i = 0; i < $scope.products.length; i++) {
        if ($scope.products[i].basket) { // if input has been set
            $scope.singleorder.push({
              'product': $scope.products[i].nom,
              'number': $scope.products[i].basket
            });
        }
    }
}

JSFiddle demo

【讨论】：

我试过了，还是不行。当期望的结果是每个产品都有一个对象时，它将一个对象推送到数组中。
@EricMitjans 试试这个小提琴，这是我第一个解决方案的一个例子：jsfiddle.net/Mistalis/fgc21e86/12

【解决方案2】：

有两种方法可以做到这一点。

第一种方法是通过添加数量属性来改变产品集合。
另一种方法是保留一个单独的集合以跟踪数量。

HTML（方式 1）：

<div ng-repeat="pa in products">
  <div>
    <h2>{{pa.nom}}</h2>
    <input type="number" ng-model="pa.quantity" min="0" max="20" step="1">
  </div>
  <a ng-click="insert(pa)">Add items</a>  
</div>

Javascript（方式一）：

$scope.singleorder = [];

$scope.insert = function(pa){
  $scope.singleorder.push({
    'product': pa.nom,
    'number': pa.quantity || 0
  });
  console.log($scope.singleorder);
}

HTML（方式 2）：

<div ng-repeat="pa in products">
  <div>
    <h2>{{pa.nom}}</h2>
    <input type="number" ng-model="productsQunatity[pa.nom]" min="0" max="20" step="1">
  </div>
  <a ng-click="insert(pa.nom,productsQunatity[pa.nom])">Add items</a>  
</div>

Javascript（方式 2）：

$scope.singleorder = [];
$scope.productsQunatity = {};

$scope.insert = function(nom){
  $scope.singleorder.push({
    'product': nom,
    'number': $scope.productsQunatity[nom] || 0
  });
  console.log($scope.singleorder);
}

请记住，您可能应该避免重复。因此，我建议检查您是否已经拥有具有特定 ID 的产品。

$scope.insert = function(pa) {
  var product = $scope.singleorder.find(function(product) {
    return product.nom === pa.nom;
  });

  if (product) {
    product.number += pa.quantity || 0;
  } else {
    $scope.singleorder.push({
      'product': pa.nom,
      'number': pa.quantity || 0
    });
  }

}

【讨论】：

【解决方案3】：

每次点击add more时初始化一个数组并推送一个空字典

$scope.products = [];
$scope.addNew = addNew;
function addNew(){
  $scope.products.push({});
}

你的 html 看起来像这样

<div ng-repeat="pa in products">
    <input type="number" ng-model="pa.basket">
</div>

您可以将验证放在添加按钮上，在您之前输入值之前不会添加更多。

它会自动形成一个json格式的

[{
   basket : 'value'
}]

【讨论】：