Question

我有一个带有scope的表单，在此范围内，有元素ID和相应值的键值对。
键和值是自动生成的。还可以有用户定义的默认值，这些默认值附加到窗口并动态添加到作用域。

我需要做的是，在第一次加载时，将默认值添加到表单中。如果用户随后填写值，则将具有键值对的范围保存到localStorage-效果很好。

重新加载页面时，我想从localStorage中获取这些值并填写表格。这适用于基本的string / integer / boolean输入值，但不适用于更复杂的对象，例如以以下格式存储值的选项框：

{
"example": {
"a": {"x": true, "y": false},
"b": {"x": true, "y": true},
"c": {"x": false, "y": true}
}
}

我尝试使用$watchCollection，-它适用于大多数控件，但是，不适用于层次结构中具有多个级别的控件（请参见示例）。

由于$watchCollection不能在层次结构中使用多个级别，因此我也尝试使用$watch。

这导致所有内容完美地保存到localStorage-包括上面的示例，但是，当页面重新加载时，$watch正在附加并立即触发。

这导致localStorage被覆盖，然后在加载时填充表单值！

frmCtrl.ts

this.$scope.$watch('lpForm', () => this.formAutoSaveService.saveData(this.pageId, this.$scope.lpForm), true);

frmAutoSaveService.ts

 saveData(pageId: string, storedData: any) {
       localStorage.setItem(pageId, JSON.stringify(storedData));
 }

我需要的是

获取localStorage并使用设置的值填写表单，而无需保留任何默认值，除非用户更改了字段的值。
让$watch开始“监视”，但直到用户更改了表单上的某些内容后才触发保存到localStorage的方法。
localStorage，不要在加载表单时被表单$scope覆盖！

有人可以帮忙吗？

Answer 1

从文档中：

在范围内注册观察者之后，listener fn被异步调用（通过$evalAsync来初始化观察者。在极少数情况下，这是不希望的，因为在{的结果时调用了监听器{1}}不变。要在watchExpression中检测到这种情况，可以比较listener fn和newVal。如果这两个值相同（oldVal）然后由于初始化而调用了侦听器。

而不是阻止手表启动，请检测初始化并将其忽略。

===

有关更多信息，请参见

AngularJS scope/rootScope Type API Reference - $watch

使用AngularJS，如何防止$ watch在加载时触发？

1 个答案: