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

我在从1.2.14迁移到1.4.8时遇到了这种情况.这在1.2.14中工作正常,但我在1.4.8中获得了一个无限的$digest()循环.这是一个证明问题的 Fiddle.小提琴比这篇文章容易看得多,但是SO让我包括代码

我有一个看起来像这样的选择元素：

<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也不会感到沮丧.它只是添加一个<选项>节点到< select> element：< option value =“？”选择= “选择” >< /选项>并且下拉列表中的选定值显示为空白. 但是,如果我然后设置我的状态s.t.我的getoptions()返回另外一个选项：

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

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

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

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

解决方法

发生此错误是因为您在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/

原文地址：https://www.jb51.cc/js/156822.html