Angularjs更新视图但不更新模型

2023年12月23日 216次阅读

请注意这与stackoverflow上99％的相关问题相反.

Mi问题是：我有一个依赖选择,当’Master’选择更改时,’Slave’视图会更新,但不是它的模型.奇怪的.

示例代码：

<!DOCTYPE html>
<html ng-app>

<head>
  <script src="https://code.angularjs.org/1.3.5/angular.js"></script>
</head>

<body>
  <select ng-model='master'>
    <option value='m1'>Master 1</option>
    <option value='m2'>Master 2</option>
  </select>
  <select ng-model='slave'>
    <option value='Slave 1 selected' ng-selected='master == "m1"'>Slave 1</option>
    <option value='Slave 2 selected' ng-selected='master == "m2"'>Slave 2</option>
  </select>
  {{ slave }}
</body>

</html>

更改主选择时,您可以看到选择更改但不显示绑定{{slave}}的打印值.

链接到plunker：http://plnkr.co/edit/LjaKgTTfBlczkGuCIhZ1

最佳答案 Angular根据模型更改和基于用户与视图交互的模型更新视图.通过使用ng-selected手动更改所选选项,angular没有看到用户选择新选项,因此不会更新slave.并且由于自上次设置控件上的选定选项后从站没有更改,因此它不会更新所选选项.我认为你不应该同时使用ng-model和ng-selected.我认为这是完全有道理的,并不是角度的错误,ng-selected只是不打算以这种方式使用.想想这段代码：

$scope.buttonClicked = function () {
  $scope.slave = "Slave 1 selected";
  $scope.master = "m2";
};

奴隶的价值应该是什么,应该选择哪个选项？你已经在代码中设置了两个选项,角色对html选择应该做什么？它应该忽略你对“奴隶”价值的设定吗？是否应忽略ng-selected属性,如果master为m2,则应选择slave 2？假设你将master设置为m1,这会导致ng-selected使所选择的选项成为slave 1.如果用户然后将选项更改为slave 2怎么办？然后,ng-selected选项不正确.

如果要在更改主服务器时对从属值进行一次性设置,则应创建一个监视以在值更改时运行代码：

$scope.$watch('master', function(newValue, oldValue) {
  if (newValue == 'm1') {
    $scope.slave = 'Slave 1 selected';
  } else if (newValue == 'm2') {
    $scope.slave = 'Slave 2 selected';
  } else {
    $scope.slave = undefined;
  }
});
点赞