Angular array values connected to ng-model

Question

I'm using two <select> tags to push values to an array in the $scope. For some reason this array then becomes connected to the select elements and when they are changed it changes the array elements.

I have made a codepen to demonstrate this behaviour.

View:

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

}

you add to array reference to object, so when you change select, change property this object, but not obect reference, so, for solving try copy object fields like: var ndata = {param:data.param, childParam:data.childParam} and then push to array ndata object instead data — Grundy
– Grundy, Commented Oct 16, 2015 at 21:15
@Grundy works perfectly... thanks...feel free to write an answer and I will mark it as correct. Or I will add it later. — Taylorsuk
– Taylorsuk, Commented Oct 16, 2015 at 21:17

Grundy · Accepted Answer · 2015-10-16 21:22:00Z

1

You add to array reference to object, so when you change value in select, you change property existing object, but not object reference, so all reference point to object with updated field.
for solving you can copy object fields to new object, like:

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

and then push to array ndata object instead data

answered Oct 16, 2015 at 21:22

Grundy

13.4k3 gold badges39 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular array values connected to ng-model

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related