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

Question

我从1.2.14迁移到1.4.8时遇到了这种情况.这在1.2.14中工作正常,但我在1.4.8中获得了无限的$ digest()循环.这是一个小提琴,展示了这个问题.小提琴比这篇文章更容易看,但是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>下拉列表中的选定值显示为空白.

但是,如果我然后设置我的状态st我的getOptions()返回另外的选项:

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

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

有没有一种避免像这样的问题的好方法？你认为它是Angular中的一个错误(技术上是一个回归),或者这只是......我不应该使用ngOptions吗？

~~~再次,我有一个很好的小提琴,你可以玩!~~~

Answer 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/