Angular 没有根据模型更新我的选择元素答案

【问题标题】：Angular not updating my select element based on the modelAngular 没有根据模型更新我的选择元素
【发布时间】：2012-09-06 15:01:21
【问题描述】：

在我的应用程序中，我有一些分组的选择元素，它们都具有相同的选项。当一个选择被更改时，它会检查其他选择以查看新选择的选项是否已在任何其他选择中被选择。如果它已被选中，则有一些逻辑可以动态选择尚未在其他选择中选择的选项。有时，此逻辑会导致选择与以前相同的选项。发生这种情况时，我的选择元素不会更新，并且与我的模型不同步。

我创建了一个非常简单的 jsFiddle，在此处显示：http://jsfiddle.net/wvLHw/

我发现了一种可能的解决方法，但我不知道在我的应用程序中这样做的可能性有多大。有没有更好的方法来让它正常工作？ angular 没有根据我的模型更新选择元素是否有某些原因？

【问题讨论】：

解决方法可以在more angular way 中完成。
我希望不必使用解决方法（我还有很多事情要做，这使得异步分配变得困难），但这绝对是解决问题的正确方法。
根据this topic 和类似问题的统计数据，我开始认为这不是解决方法，而是角度变化、渲染过程和异步事件问题的可能解决方案之一，就像所有 JavaScript在浏览器中在单个线程上执行。
查看 my explanation 为什么它不起作用。

标签： javascript angularjs

【解决方案1】：

这是 1.0.2 版本的 angularjs 问题，已在 1.0.3 中修复。

现在应该对你有用

$scope.myOnChange = function() {
    //more logic here, but ends up back at c
    $scope.foo = "c";
}

【讨论】：

【解决方案2】：

我不确定我是否正确解释了您的问题，但我假设您有多个选择，并且当其中一个选择中的值发生更改时，您想要执行一些逻辑（基于其他选择） values) 最终将计算要设置的最终值。

如果以上是正确的，那么使用 $scope.$watch 将涵盖您的用例。为了举例，我们假设我有 2 个选择绑定到 2 个不同的模型值（foo 和 bar）。如果有人更改了 foo 的值并且它等于为 bar 选择的值，那么您希望强制 foo 成为其他值。在这种情况下，这段代码可以解决问题：

$scope.$watch('foo', function(fooValue){
    if (fooValue === $scope.bar){
        $scope.foo = 'a';
    }
});

这里是完整的 jsFiddle：http://jsfiddle.net/pkozlowski_opensource/vqjKq/3/

我希望我正确地解释了您的用例，但如果不是，请对此答案发表评论，我很乐意提供更新。

【讨论】：

我想你明白我在做什么。使用您的 jsFiddle，我将第一个选择设置为 c，然后将其更改为 a，这很好且正确。但是，然后我再次将其更改为c，然后它遇到了与我描述的相同的问题。选择显示c，但{{foo}} 显示a。只有当它恢复到原来的样子时才会出现问题。
哦，我现在明白了。会用这个 jsFiddle 玩一点，如果我想不通，我会删除我的答案。
在通过 AngularJS 调试了一下之后，我可以看到发生了什么。基本上视图不会重新渲染，因为模型没有更新（并且视图仅在模型更新时重新渲染：github.com/angular/angular.js/blob/master/src/ng/directive/…）。我现在能看到的唯一选择是编写一个自定义指令，很快就会有一个 jsFiddle。