Question

我正在学习AngularJS，希望能为我面临的问题寻求帮助。

我的控制器中有一个对象（朋友）数组，我使用ngOptions绑定到select元素。使用下拉列表，用户可以选择朋友并查看朋友信息（ID，姓名，年龄等）。

我还添加了一个按钮，允许用户更改所选朋友的年龄。单击按钮时，朋友年龄会发生变化并反映在UI中。 但是，年龄更改未反映在数组中如果用户随后从下拉列表中选择了另一位朋友，然后选择原始朋友，则显示的年龄是更改前的原始年龄。

希望这个掠夺者可以澄清我的解释：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>

我的背景是C ++和C＃。在这些语言中，像这样的问题是由于从数组中复制对象并更改它而不是更改对数组中对象的引用。我一直在网上搜索，似乎我的问题可能与我所处的范围有关，但我不确定。

Answer 1

如果你只是在你的saveNewAge函数中添加一个for循环，以便将所选的人与数组中的人匹配（我使用id匹配）并在那里设置年龄，它应该做你想要的。

$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;
  }
}

如ngOptions documentation

中所述

注意：默认情况下，ngModel通过引用而非值来监视模型。将任何输入指令绑定到作为对象或集合的模型时，这很重要。

使用select

1 个答案: