使用输入文本 Angular 克隆对象答案

【问题标题】：Clone object with input text Angular使用输入文本 Angular 克隆对象
【发布时间】：2016-01-23 03:49:13
【问题描述】：

我有一些字段（选择并输入文本）。用户可以单击“添加”按钮添加新行。但是如果我想用输入克隆填充的数组，我该怎么办？

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

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

【问题讨论】：

只要你要克隆的项目都是一个Object，你可以使用angular.copy()。

标签： javascript jquery angularjs duplicates clone

【解决方案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

【讨论】：

欢迎您@panagulis72。如果您喜欢这个答案并且它解决了目的，请接受它。

【解决方案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);
}

【讨论】：