angularJS - Duplicate Input in Form

Question

I need to duplicate two connected inputs in a form. One is a select field and the other a textarea.

I thought I had found a solution but there's a pretty big bug. When removing the last set of inputs, the previous set is overwritten by the items that were just deleted. This makes sense when I look at the implentation. When a delete happens, the index is updated, and then last set of inputs gets the index from the input that was just deleted and the values are overwritten.

The problem is that I don't know how to fix this. Any ideas?

I have included a plunker here. http://plnkr.co/edit/385RWamBaVSq0Cv5zbmq?p=preview

My controller:

    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>

Just a heads up that your code doesn't currently allow the selection of "Chicken" because it has the same "code" as "Cheese". — Andrew Sula
– Andrew Sula, Commented Aug 10, 2014 at 17:45

runTarm · Accepted Answer · 2014-08-10 17:45:02Z

2

Actually, there is no item get overwritten. The problem is that the wrong item is deleted because you are using the splice() method incorrectly. The first of its argument should be an index of the item like this:

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

and in the template, pass the item index by $index like this:

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

Example Plunker: http://plnkr.co/edit/2SMbeTSqn0v65iKC3SpY?p=preview

PS. Another problem is that you have a duplicate foodType code, Chicken and Cheese have the same CH code. That will make you unable to select the Chicken!

answered Aug 10, 2014 at 17:45

runTarm

11.6k1 gold badge39 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jimmy Over a year ago

Thank you. This works. Good spot on the code duplication too. Cheers.

Andrew Sula · Accepted Answer · 2014-08-10 17:50:52Z

2

Please see here: http://plnkr.co/edit/hSF1UWtKfQO18n0VlaYQ?p=preview

Just edit your removeItem function.

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

edited Aug 10, 2014 at 17:50

Andrew Sula

9398 silver badges24 bronze badges

answered Aug 10, 2014 at 17:42

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Comments

Bodzio · Accepted Answer · 2014-08-10 17:42:57Z

1

In line 61 you should replace removeItem(item) with removeItem($index)

answered Aug 10, 2014 at 17:42

Bodzio

2,5202 gold badges21 silver badges37 bronze badges

Collectives™ on Stack Overflow

angularJS - Duplicate Input in Form

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related