AngularJS：ngOptions在从函数接收数据集时出错

Question

我使用AngularJS 1.4.8并拥有以下代码：

查看：

<select ng-model="myForm.car" ng-options="obj.id as obj.name for obj in myForm.getCarObjects()" multiple="true">
</select>

控制器：

$scope.myForm = {};
$scope.myForm.car = ["nissan"];
$scope.myForm.carObjects = [
    {id: "nissan", name: "Nissan"},
    {id: "toyota", name: "Toyota"},
    {id: "maruti", name: "Maruti"}
];

$scope.myForm.getCarObjects = function() {
    return [
        {id: "nissan", name: "Nissan"},
        {id: "toyota", name: "Toyota"},
        {id: "maruti", name: "Maruti"}
    ]
}

这会出现以下错误：

一切仍然正常。绑定到视图的模型仍然会更新选择列表中的值更改。

当我将函数getCarObjects更改为以下内容时，错误消失了：

$scope.myForm.getCarObjects = function() {
    return this.carObjects;
}

当有人返回新构造的对象数组时，有人可以解释为什么我会收到错误吗？

Answer 1

要理解此错误，您必须了解$ digest循环。 Angular调用所有已注册的$ watch函数，将返回值与旧值进行比较，并调用相应的事件侦听器（如果有任何更改）。如果在$ digest循环中检测到任何更改，则angular再次启动$ digest循环，因为之前调用的$ watch函数可能已更改了值。只要检测到变化或循环计数器达到10，然后角度放弃，就会发生这种情况。

在您的示例中，在为select标记构建选项时，每次调用getCarObjects都会一次又一次地更改已注册的选项，因为您在对象之后创建了对象。

希望有所帮助。