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>

控制器：

$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

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

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

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

角度数组值连接到ng-model

1 个答案: