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中的数组时，它会向该对象添加 reference ，因为这是通过引用存储Javascript对象的方式。这意味着将来$scope.data发生任何更改时，您在数组中看到的值也会更改。因此，您可以改为执行以下操作：

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

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

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

1 个答案: