Question

我需要在表单中复制两个连接的输入。一个是选择字段，另一个是textarea。

我以为我找到了解决方案，但这是一个非常大的错误。删除最后一组输入时，前一组将被刚刚删除的项覆盖。当我查看实现时，这是有道理的。当发生删除时，索引会更新，然后最后一组输入从刚删除的输入中获取索引并覆盖值。

问题在于我不知道如何解决这个问题。有什么想法吗？

我在这里加了一个傻瓜。 http://plnkr.co/edit/385RWamBaVSq0Cv5zbmq?p=preview

我的控制器：

    function DuplicateInputCtrl($scope) {
      $scope.foodTypes = [
        {
          "code" : "AP",
          "type" : "Apple"
        },
        {
          "code" : "CH",
          "type" : "Chicken"
        },
        {
          "code" : "CH",
          "type" : "Cheese"
        }
      ]

      $scope.foods = [
        {
          "Selection": "",
          "Text": ""
        }
      ]

      $scope.cloneItem = function () {
        var itemToClone = { "Selection": "", "Text": "" };
        $scope.foods.push(itemToClone);
      }

      $scope.removeItem = function (item) {
        $scope.foods.splice(item, 1);
      }

    }

HTML：

<body ng-controller="DuplicateInputCtrl" class="container">
 <div data-ng-repeat="food in foods">
  <div class="form-group title-field">
    <label for="">Food</label>
    <select class="form-control input-full" data-ng-model="food.Selection"
        data-ng-options="foodType.code as foodType.type for foodType in foodTypes">
        <option value="">Select</option>
    </select>
    <input type="hidden">
    <button data-ng-click="removeItem(food)" class="btn delete-field-{{$index}}">
      Delete
    </button>
  </div>
  <div class="form-group">
   <textarea class="form-control" data-ng-model="food.Text"></textarea>
  </div>
 </div>
 <button data-ng-click="cloneItem()" class="btn inline">
  Add
 </button>    
</body>

Answer 1

请参见此处：http://plnkr.co/edit/hSF1UWtKfQO18n0VlaYQ?p=preview

只需编辑你的removeItem函数。

 $scope.removeItem = function (item) {
     index =  $scope.foods.indexOf(item)
     $scope.foods.splice(index, 1);
 }

Answer 2

实际上，没有项目被覆盖。问题是删除了错误的项目，因为您错误地使用了splice()方法。它的第一个参数应该是项目的索引，如下所示：

$scope.removeItem = function (itemIndex) {
  $scope.foods.splice(itemIndex, 1);
};

并在模板中，将项目索引传递给$index，如下所示：

<button data-ng-click="removeItem($index)" ..

示例Plunker： http://plnkr.co/edit/2SMbeTSqn0v65iKC3SpY?p=preview

PS。另一个问题是您有一个重复的foodType代码，Chicken和Cheese具有相同的CH代码。这将使你无法选择鸡肉！

Answer 3

在第61行中，您应该将removeItem(item)替换为removeItem($index)

angularJS - 表单中的重复输入

3 个答案: