Problem with add and delete elements dinamically in angularjs

Question

I have multiple select with different values. When the user selects the options that he wishes, press add button and must be added as elements to an array and that new line of added options be displayed in the view.

This does not work correctly, since each new selection steps on the values of the previous one. Only the last chosen option prevails. Example of my wrong array of values:

[{"product":"Product3","type":"A"},{"product":"Product3","type":"A"},{"type":"Product3","type":"A"}]

Here is my code:

          <div class="col-md-3">
            <label for="product" class="control-label">Product</label>
            <select class="form-control pull-right" name="product" ng-model="data.product" >
              <option ng-repeat='(key,value) in productList' value="{{key}}">{{value}}</option>
            </select>
          </div>

          <div class="col-md-3">
            <label for="type" class="control-label">Type</label>
            <select class="form-control pull-right" name="type" ng-model="data.type" >
              <option ng-repeat='i in typeList' value="{{i}}">{{i}}</option>
            </select>
          </div>

         <button type="button" class="btn" ng-click="addElements()" >Add</button>
         <div class="col-md-3">{{elementsList}}</div>

And in my angular controller:

            $scope.elementsList = [];
            $scope.addElements = function() {
                $scope.elementsList.push($scope.data);
            }

What's my problem? I am new in angular and js and it is difficult for me to see it ... how can I add and remove elements dynamically? Thanks!

Dan · Accepted Answer · 2019-06-05 10:29:11Z

1

When you add the $scope.data object to the array in addElements, it adds a reference to that object because that's how Javascript objects are stored: by reference. What that means is that any time that $scope.data changes in the future, the value you see in the array will also change. So you can do something like this instead:

$scope.addElements = function() {
    const clone = Object.assign({}, $scope.data);
    $scope.elementsList.push(clone);
}

This creates a new object clone each time.

answered Jun 5, 2019 at 10:29

Dan

63.5k18 gold badges113 silver badges122 bronze badges

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

1 Comment

Norak Over a year ago

Works perfectly!! Thanks for your answer and explanation :)

Collectives™ on Stack Overflow

Problem with add and delete elements dinamically in angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related