AngularJS 1.4.8 - select 中的 ngOptions - 当我在 ngOptions 中的选项之前以编程方式设置模型时无限 $digest() 循环

Question

我在从 1.2.14 迁移到 1.4.8 时遇到了这个问题。这在 1.2.14 中工作正常，但我在 1.4.8 中得到一个无限的 $digest() 循环。这是一个 Fiddle 演示问题。 Fiddle 比这个 post 更容易看，但是 SO 让我包含代码

我有一个 select 元素，如下所示：

<select ng-model="selectedId" ng-options="opt.id as opt.label for opt in getOptions()">

我的选项是对象，像这样：

$scope.options = [ { id: 1, label: 'one' }, { id: 2, label: 'two' } ];

我想为 ngOptions 指令提供的选项数组取决于条件；有时我只想给它 $scope.options，但有时我想包括另一个选项。

$scope.getOptions = function() {
    if ($scope.showThirdOption)
        return [{ id: 3, label: 'three' }].concat($scope.options);
    else
        return $scope.options;
};

现在，如果我以编程方式将我的模型设置为 3：

...
$scope.selectedId = 3;
...

...Angular 不会感到沮丧，即使该选项不存在。它只是将 <option> 节点添加到 <select> 元素：<option value="?" selected="selected"></option> 并且下拉列表中的选定值显示为空白。

但是如果我然后设置我的状态 s.t。我的 getOptions() returns 附加选项：

...
$scope.selectedId = 3;
$scope.showThirdOption = true;
...

...我得到一个无限的 $digest() 循环。

有什么好的方法可以避免这样的问题吗？您认为这是 Angular 中的错误（从技术上讲是回归），还是这只是……我不应该使用 ngOptions 的方式？

~~~ Again, I have a nice Fiddle for you to play around with!! ~~~

Answer 1

错误是因为你在ng-options中调用了函数getOptions()。创建新变量并分配此函数返回的值，然后在 ng-options 中使用它：

$scope.newOptions = $scope.getOptions();

ng-options="opt.id as opt.label for opt in newOptions"

另外不要忘记在单击按钮时更新新选项。

那你就没有无限的摘要了。查看更新后的 fiddle：http://jsfiddle.net/bbcjeuhb/

AngularJS 1.4.8 - select 中的 ngOptions - 当我在 ngOptions 中的选项之前以编程方式设置模型时无限 $digest() 循环

AngularJS 1.4.8 - ngOptions in a select - infinite $digest() loop when I programmatically set model before option is in ngOptions

javascript

angularjs

ng-options

angularjs-ng-model