javascript - 连接到 ng-model 的 Angular 数组值

Question

我正在使用两个 <select>标签将值推送到 $scope 中的数组。由于某种原因，该数组随后连接到 select元素，当它们改变时，它会改变数组元素。

我做了一个codepen来证明这种行为。

查看:

<div class="form-group">
  <div class="row">
    <div class="col-sm-4">
      <label class="item item-input item-select">
        <div class="input-label positive">
          Select Parameter
        </div>
        <select ng-model="data.param">
          <option ng-repeat="param in params track by $index" value="{{param}}">{{param}}</option>
        </select>
      </label>
    </div>
    <div class="col-sm-4">
      <label class="item item-input item-select">
        <div class="input-label positive">
          {{data.param || 'SELECT'}}
        </div>
        <select ng-model="data.childParam">
          <option ng-repeat="child in children[data.param] track by $index" value="{{child}}">{{child}}</option>
        </select>
      </label>
    </div>
    <div class="col-sm-4">
      <button class="btn btn-primary" ng-click="addParam(data)"> SAVE</button>
    </div>
  </div>
  <ul class="list-group">
    <li ng-repeat="savedParm in activeExercise.Params track by $index" class="list-group-item"><strong>{{savedParm.param}}</strong> : {{savedParm.childParam}}
    </li>
  </ul>
  {{activeExercise.Params}}
</div>

Controller :

$scope.addParam = function(data) {
    console.log(data);

    if (!$scope.activeExercise.Params) {
        $scope.activeExercise.Params = [];
    }

    if ($scope.activeExercise) {

        $scope.activeExercise.Params.push(data);

    } else if ($scope.editExercise.Params) {

        $scope.editExercise.Params.push(data);
    }

    console.log(JSON.stringify($scope.activeExercise));

}

Answer 1

您添加到对象的数组引用，因此当您更改选择中的值时，您会更改现有对象的属性，但不会更改对象引用，因此所有引用都指向具有更新字段的对象。
为了解决这个问题，您可以将对象字段复制到新对象，例如:

var ndata = {param:data.param, childParam:data.childParam} 

然后推送到数组ndata对象而不是data