使用 getterSetter 的 ng-model 的角度无限摘要循环

Question

这里是html：

<select style="width: 100%;" ng-model="vm.orgType" ng-model-options="{getterSetter: true}" ng-options="orgType as orgType.ORGANIZATION_TYPE for orgType in vm.orgTypes">
                                </select>

这里是getter/setter函数：

function orgType(selectedType) {
            if (arguments.length == 0)
                return orgType.selectedOrgType || { ORGANIZATION_TYPE: 'Organization Type', ORGANIZATION_TYPE_ID: null };

            orgType.selectedOrgType = selectedType;
            if (selectedType.ORGANIZATION_TYPE_ID) {
                if (vm.registrant.StakeholderOrgs[0])
                    vm.registrant.StakeholderOrgs[0] = selectedType.ORGANIZATION_TYPE_ID;
                else
                    vm.registrant.StakeholderOrgs.push(selectedType.ORGANIZATION_TYPE_ID);
            }
            else
                vm.registrant.StakeholderOrgs.splice(0);
        }

下面一行：

return orgType.selectedOrgType || { ORGANIZATION_TYPE: 'Organization Type', ORGANIZATION_TYPE_ID: null };

抛出无限摘要循环错误。

让我解释一下我想在这里做什么。如果进行了选择，我需要将 id 推送到列表中。我意识到我可以在某个变量 selectedOrgType 上做一个 ng-model，然后把我的逻辑放在一个 ng-change 中。但是，我正在尝试制作一个不会创建任何不必要的模型变量的下拉菜单。相反，我希望将逻辑放在 getter/setter 中，这对我来说似乎更合适。 vm.orgTypes 之一是 { ORGANIZATION_TYPE: 'Organization Type', ORGANIZATION_TYPE_ID: null }，我希望这将是我的默认值，而不是我得到这个摘要错误，不明白它来自哪里。

Answer 1

当您添加 ng-model 属性时，角度添加内部监视，检查每个摘要循环的值，如果值更改 - 再次运行摘要。

在您的情况下，您返回对象文字。在 javascript 中，当你比较两个文字时，即使结构相同 - 你会得到 false

({a:1} == {a:1}) // false

因为这确实是两个不同的对象。

因此，当您在 getter 中返回对象字面量时，watch 用之前的值检查它，并且，正如我上面所说，如果您返回字面量 - 获取 false

所以你得到了无限摘要的错误。

为了解决你只需要返回相同的对象。

如果你在数组中有这个对象，比如

vm.orgTypes=[
    { ORGANIZATION_TYPE: 'Organization Type', ORGANIZATION_TYPE_ID: null }
];

所以你只需要直接使用它：

 return orgType.selectedOrgType || orgTypes[0];

另一种方式：只需将默认值保存到变量并使用它

var defaultSelect = { ORGANIZATION_TYPE: 'Organization Type', ORGANIZATION_TYPE_ID: null };

....

function orgType(selectedType) {
    if (arguments.length == 0)
        return orgType.selectedOrgType || defaultSelect;

在这种情况下，您将在默认情况下返回相同的元素，因此请避免无限消化战利品。