javascript - 在angularjs中动态添加和删除元素的问题

Question

我有多个具有不同值的选择。当用户选择他想要的选项时，按添加按钮，并且必须作为元素添加到数组中，并且新添加的选项行显示在 View 中。

这不能正常工作，因为每个新选择都基于前一个选择的值。仅以最后选择的选项为准。我的错误数组示例:

[{"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>

在我的 Angular Controller 中:

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

这每次都会创建一个新的对象克隆。