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

Question

我有一个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在输入上单独添加每个项目,但它会在每次更改时推送一个对象,在每次更改时复制该项目,因此它将无法工作.

有小费吗？

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