【问题标题】:AngularJS: ngOptions gives error when data set received from functionAngularJS:从函数接收数据集时,ngOptions 会出错
【发布时间】:2015-12-08 17:26:55
【问题描述】:

我正在使用 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;
}

有人可以解释为什么当函数返回一个新构造的对象数组时我得到错误吗?

【问题讨论】:

  • 这就是角度的工作方式 :-) 当您返回新数组时,角度认为某些东西发生了变化,然后再次运行摘要循环,然后再次获取新数组,并认为某些东西发生了变化......
  • 另外,通过异常链接,您可以获得角度文档中的描述
  • @Grundy 感谢您指向文档。文档说:“由于 getUsers() 返回一个新数组,Angular 确定模型在每个 $digest 循环上都不同,从而导致错误。解决方案是如果元素没有更改,则返回相同的数组对象”。如何有多个 $digest 循环?另外,如果数组元素发生变化,我们需要做什么?

标签: javascript angularjs


【解决方案1】:

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

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

希望对您有所帮助。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-03-16
    • 1970-01-01
    • 1970-01-01
    • 2019-03-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多