AngularJS：再次将模型设置为 = {} 不会清除输入类型 ='url'答案

【问题标题】：AngularJS: Set the model to be = {} again doesn't clear out input type='url'AngularJS：再次将模型设置为 = {} 不会清除输入类型 ='url'
【发布时间】：2013-09-23 07:38:25
【问题描述】：

我有一个提琴手设置，当我单击重置按钮时，它应该清除输入控件，这似乎有效但输入 type='url' 时无效

Here is the fiddler

是否有问题或我不理解的内容。

当我设置时

$scope.myform = {};

这似乎清除了其他输入类型，但输入 type='url' 没有被清除。

有人知道为什么吗？

【问题讨论】：

标签： angularjs angularjs-scope

【解决方案1】：

当您在 input[type="url"] 中没有有效值时会发生您看到的问题。无效值仅保留在视图中（输入字段），不会被推送到 ng-model 内的范围变量。只有当值正确时才会更新变量。

您可以通过输入一个有效值来测试它。重置按钮将起作用。如果您输入的值无效，则不会。

您可以通过设置$scope.myform = null 而不是$scope.myform = {} 来修复它。这将清空该字段，因为范围变量 (expression) 将是 undefined。一旦您在任何字段中输入有效值，它将由 Angular 自动创建。

【讨论】：

哇，成功了！我担心=null，因为如果我尝试在模型更新任何内容之前在代码中触摸该对象它仍然是null，那么它会起作用，所以这个$scope.myform = null 然后是$scope.myform = {}，这将确保我们有一个有效的对象......???
没有。这不起作用，因为您将在当前 $digest 阶段之前更改它，最后它仍然是一个对象。但是，您可以使用 $timeout 并将值设置为那里的对象，或者在访问对象之前检查该对象是否为空。

【解决方案2】：

因为您需要在第二个框中输入一个有效的 url，例如http://www.abc.com，然后重置按钮才会起作用。

【讨论】：

是的，我注意到...一个有效的 URL 将允许它重置
@Martin 你可以强制给它一个值 $scope.bar = '' 来清除。
我不想将它设置为 '' 因为从技术上讲它没有任何价值。
@Martin 有一个值，该值为空字符串。有意义吗？

【解决方案3】：

为了正确更新视图/模型，我建议您像这样显式重置模型的属性：

$scope.reset = function() {
    $scope.myform = {
        foo: '',
        bar: ''
    };
    $scope.formName.$setPristine();
};

将 'myform' 设置为空对象会删除其字段，但不会将它们设置为空白字符串。很可能 Angular 的清理可能不会删除视图引用的值，因此会混淆应用程序的模型和视图状态。

希望对您有所帮助。

【讨论】：

这不是问题的根源。即使在小提琴上尝试你的答案也不会产生预期的结果。
按照我的描述修改重置功能将导致两个文本框按照发布者的要求重置。我不确定您还期望发生什么。
我的错。出于某种原因，我使用了url 而不是bar。你说的对。但它不更新的原因是因为type="url" 触发了验证。只要该值不是有效的 url，模型上的值就是null。在模型重置后的摘要循环中，模型的值将是undefined，并且不会触发对表单的$viewValue 的更新。将bar 设置为空字符串会起作用（因为'' 既不是undefined 也不是null）但它有点粘，因为你的模型现在有一个值并且对于表单验证不可靠除非您检查 ''
关于没有有效 URL 的模型和视图之间断开连接的部分，您是完全正确的。但是，如果您想确保无论是否输入了有效 URL，重置功能都能正常工作，则需要明确清除模型值。