Question

I have a ng-repeat displaying a list of products with an input each. I want to be able to push the value of each input together with a parameter from every item into a new array to create an order.

So far I managed to do it individually, but not all together.

Here's my 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>

And the function:

$scope.singleorder = [];

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

I assume the issue has to do with keeping track of the different models of the inputs on each repeat, but I don't know how to deal with it.

I've also tried adding each item individually using ng-change on the input, but it will push an object on every change, duplicating the item on every change, so it won't work.

Any tips?

Answer 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

Answer 2

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

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

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（方式1）：

$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
    });
  }

}

Answer 3

每次单击添加更多

时，初始化数组并推送空字典

$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'
}]

Pushing input values from ng-repeat into array with AngularJS

3 个答案:

JSFiddle demo