将表单重置为原始状态(AngularJS 1.0.x)

2024-04-29

AngularJS 1.1.x 的路线图上有一个将表单字段重置为原始状态(重置脏状态)的功能。不幸的是,当前的稳定版本中缺少这样的功能。

对于 AngularJS 1.0.x,将所有表单字段重置为其初始原始状态的最佳方法是什么?

我想知道这是否可以通过指令或其他简单的解决方法来修复。我更喜欢无需接触原始 AngularJS 源代码的解决方案。为了澄清和演示该问题,提供了 JSFiddle 的链接。http://jsfiddle.net/juurlink/FWGxG/7/ http://jsfiddle.net/juurlink/FWGxG/7/

所需的功能位于Roadmap - http://blog.angularjs.org/2012/07/angularjs-10-12-roadmap.html http://blog.angularjs.org/2012/07/angularjs-10-12-roadmap.html
功能要求 - https://github.com/angular/angular.js/issues/856 https://github.com/angular/angular.js/issues/856
建议的解决方案拉取请求 - https://github.com/angular/angular.js/pull/1127 https://github.com/angular/angular.js/pull/1127

更新了可能的解决方法

足够好的解决方法吗?

我刚刚发现我可以重新编译 HTML 部分并将其放回到 DOM 中。它有效,并且对于临时解决方案来说很好,但也正如@blesh 在评论中提到的那样:

控制器应该仅用于业务逻辑,而不是用于 DOM!

<div id="myform">
  <form class="form-horizontal" name="form">
  </form>
</div>

在我的控制器上resetForm():

  • 保存原始未修改的 HTML
  • 重新编译保存的原始HTML
  • 从 DOM 中删除当前表单
  • 将新编译的模板插入到 DOM 中

JavaScript:

var pristineFormTemplate = $('#myform').html();
$scope.resetForm = function () {
    $('#myform').empty().append($compile(pristineFormTemplate)($scope));
}

我认为值得一提的是,在 Angular 的更高版本(例如 1.1.5)中,您可以调用$setPristine表格上。

$scope.formName.$setPristine(true)

这也会将所有表单控件设置为原始状态。

FormController.$setPristine http://docs.angularjs.org/api/ng.directive:form.FormController#%24setPristine

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将表单重置为原始状态(AngularJS 1.0.x) 的相关文章

随机推荐