Change to AngularJS model not reflected in array when using select

Question

I'm learning AngularJS and am hoping I can get some help with a problem I'm facing.

I have an array of objects(friends) in my controller that I've bound to a select element using ngOptions. Using the dropdown, a user can select a friend and view the friends information (id, name, age, etc).

I have also included a button that allows the user to change the age of the selected friend. When the button is clicked, the friends age is changed and reflected in the UI. However, the age change is not reflected in the array If the user then selects a different friend from the drop down and then selects the original friend, the age shown is the original age before the change.

Hopefully this plunker can clarify my explanation: http://plnkr.co/edit/9yfKSt75BhQDIMZjDLVi?p=preview

angular.module('defaultValueSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {

   $scope.friends = [{id:5, name: "jack", age: 35}, {id:8, name: "jill", age: 38}];

   $scope.newAge;
   $scope.saveNewAge = function(){
     $scope.selectedFriend.age = $scope.newAge;
   }
}]);

<!doctype html>
<html ng-app="defaultValueSelect" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="ExampleController">
  <form name="myForm">
    <label for="mySelect">Choose a friend:</label>
    <select name="mySelect" id="mySelect"
      ng-options="friend.name for friend in friends track by friend.id"
      ng-model="selectedFriend"></select>
  </form>
  <hr>
  <tt>selected friend = {{selectedFriend}}</tt><br/>
  <input type="text" class="form-control" ng-model="newAge">
  <button ng-click="saveNewAge()">Update age</button>
</body>
</html>

My background is in C++ and C#. In those languages, a problem like this would be due to copying an object from the array and changing it rather than changing a reference to the object in the array. I've been searching the internet, and it seems like my problem may have something to do with what scope I'm in, but I'm not sure.

Spaceman Spiff · Accepted Answer · 2015-09-25 18:57:23Z

1

If you just add a for loop into your saveNewAge function to match the selected person to the person in the array (I used id to match) and set the age there it should do what you want.

$scope.saveNewAge = function() {
  $scope.selectedFriend.age = $scope.newAge;
  for (var i = 0; i < $scope.friends.length; i++) {
    if ($scope.friends[i].id === $scope.selectedFriend.id)
      $scope.friends[i].age = $scope.selectedFriend.age;
  }
}

As is mentioned in the ngOptions documentation

Note: By default, ngModel watches the model by reference, not value. This is important when binding any input directive to a model that is an object or a collection.

edited Sep 25, 2015 at 18:57

answered Sep 25, 2015 at 18:51

Spaceman Spiff

9441 gold badge14 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

Change to AngularJS model not reflected in array when using select

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