CODEWITHSUNDEEP
javascriptformsangularjsangularjs-ng-repeat
Jimmy
Jimmy

Reputation: 428

angularJS - Duplicate Input in Form

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>

Upvotes: 1

Views: 3277

Answers (3)

sylwester
sylwester

Reputation: 16498

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);
 }

Upvotes: 2

runTarm
runTarm

Reputation: 11547

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!

Upvotes: 2

Bodzio
Bodzio

Reputation: 2520

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

Upvotes: 1

Related Questions