CODEWITHSUNDEEP
javascriptangularjs
Norak
Norak

Reputation: 413

Problem with add and delete elements dinamically in angularjs

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!

Upvotes: 2

Views: 33

Answers (1)

Dan
Dan

Reputation: 63059

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.

Upvotes: 1

Related Questions