Проблема с добавлением и удалением элементов динамически в angularjs

Question

У меня есть множественный выбор с разными значениями. Когда пользователь выбирает нужные параметры, нажмите кнопку «Добавить», и они должны быть добавлены как элементы в массив, и эта новая строка добавленных параметров будет отображена в представлении.

Это не работает правильно, так как каждый новый выбор шагает по значениям предыдущего. Преобладает только последний выбранный вариант. Пример моего неверного массива значений:

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

Вот мой код:

          <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>

А в моем угловом контроллере:

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

В чем моя проблема? Я новичок в angular и js, и мне трудно это увидеть ... как я могу добавлять и удалять элементы динамически? Спасибо!

Answer 1

Когда вы добавляете объект $scope.data в массив в addElements, он добавляет ссылку к этому объекту, потому что именно так хранятся объекты Javascript: по ссылке.Это означает, что всякий раз, когда $scope.data изменится в будущем, значение, которое вы увидите в массиве, также изменится.Таким образом, вы можете сделать что-то вроде этого:

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

Это каждый раз создает новый клон объекта.