使用输入文本克隆对象 Angular

Question

我有一些字段（select 和输入文本）。用户可以单击按钮 'add' 添加新行。但是如果我想用输入克隆填充的数组怎么办？

我的意思是：我 select 3°，然后我在第一个输入类型中写“55”，在第二个输入类型中写“9”。如果用户按 'add'，我如何用我写的数字复制该字段？

<button data-ng-click="cloneItem()" class="btn inline">
 Add
</button>

Answer 1

您需要在 ng-repeat 中添加按钮，然后将输入的食物对象传递给 cloneItem 函数。然后你可以在那个函数中克隆那个项目。使用 angular copy 函数复制食物对象。

代码：

更改控制器作用域函数：

$scope.cloneItem = function (food) {
   var itemToClone = angular.copy(food);
   $scope.foods.push(itemToClone);
}

已更改 HTML（ng-repeat 循环）：

<div ng-controller="ProductController">

      <div data-ng-repeat="food in foods track by $index">
        <div class="form-group title-field">
          <select  ng-model="food.selectproduct" >
            <option value="1">0101003 - Min. Diet pesce 2 Scd</option>
            <option value="2">0101004 - Min. Maint pesce 4 Scm</option>
            <option value="3">0101115 - Min. Diet pesce 1.5 Scd</option>
          </select>
          <input type="hidden">
          <button data-ng-click="removeItem($index)" class="btn delete-field-{{$index}}">
            Delete
          </button>
        </div>

        <div class="form-group">
            <label> QUANTITY 1 </label>
            <input type="text" class="form-control" data-ng-model="food.Quantity1" id="barcodeValue1" >
        </div>

        <div class="form-group">
            <label> QUANTITY 2 </label>
            <input type="text" class="form-control" data-ng-model="food.Quantity2" id="barcodeValue2">
        </div>

        <div class="ean">
          <h2> CODE: </h2>
          <barcode food="food"></barcode>
        </div>
        {{food | json}}
        <button data-ng-click="cloneItem(food)" class="btn inline">
        Add
      </button>
      </div>

Working Plunkr

Answer 2

假设您想在单击添加按钮时复制前一个块的值，您可以这样做：

$scope.cloneItem = function() {
  var food = $scope.foods[$scope.foods.length - 1];
  var itemToClone = {
    "selectproduct": food.selectproduct,
    "Quantity1": food.Quantity1,
    "Quantity2": food.Quantity2
  };
  $scope.foods.push(itemToClone);
}

使用输入文本克隆对象 Angular

Clone object with input text Angular

javascript

jquery

clone

duplicates

angularjs