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

【问题标题】：AngularJS 1.4.8 - ngOptions in a select - infinite $digest() loop when I programmatically set model before option is in ngOptionsAngularJS 1.4.8 - 当我在选项位于 ngOptions 之前以编程方式设置模型时，选择中的 ngOptions - 无限 $digest() 循环
【发布时间】：2015-12-16 03:33:58
【问题描述】：

我在从 1.2.14 迁移到 1.4.8 时遇到了这个问题。这在 1.2.14 中运行良好，但在 1.4.8 中我得到了一个无限的 $digest() 循环。这是一个Fiddle 演示问题。 Fiddle 比这篇文章更容易看，但是 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() 返回该附加选项：

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

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

有没有避免此类问题的好方法？你认为这是 Angular 中的一个错误（从技术上讲，它是一种回归），还是这只是......不是我应该使用 ngOptions 的一种方式？

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

【问题讨论】：

这是一个示例，表明如果您的选项是值而不是对象，则不会出现此问题：http://jsfiddle.net/x15jccmj/3。

标签： javascript angularjs ng-options angularjs-ng-model

【解决方案1】：

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

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

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

别忘了在按钮点击时更新 newOptions。

那么你将没有无限的摘要。查看更新的小提琴：http://jsfiddle.net/bbcjeuhb/

【讨论】：