Angular：如何重置映射到不同数据的表单元素答案

【问题标题】：Angular: how to reset form elements that map to different dataAngular：如何重置映射到不同数据的表单元素
【发布时间】：2016-02-17 02:59:59
【问题描述】：

我的 Angular 应用在一个页面上有 > 1 个表单。每个表格都可以保存或重置。每个表单上的字段不一定映射到它自己的数据对象。

例如，我有两条必须分别获取和保存的数据。让我们调用 json 块，a 和 b。

HTML：

<form>
<input type="text" ng-model="a.foo"/>
<input type="text" ng-model="b.bar"/>
</form

<form>
<input type="text" ng-model="b.bar[0].baz"/>
<input type="text" ng-model="a.boo"/>
</form

如果第一个表单只映射到a，第二个映射到b，那么重置数据就很简单了。但我不想重置页面上所有表单的所有a 或b 数据。我只想重置特定表单上表示的输入的特定数据字段。

我目前的逻辑大部分有效。取消时，我获取表单中的元素，获取它们的 ng-model 属性并根据 ng-model 字符串值动态重置 a 和 b 上的属性。这看起来很“脏”，而且它不适用于某些使用 $index 特殊变量的 ng-model 属性，因为在执行 .attr() 时，attr 值不会被 angular 解析。什么是最好的解决方案？映射回原始数据的每个表单的不同模型？

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

在打开表单时对正在编辑的对象进行深拷贝并对其进行编辑 (angular.extend)
保存时只需使用您的保存逻辑
取消后您无需执行任何操作

例如

 .controller('myctrl', function($scope, dataService) { 
    $scope.data = angular.extend( {}, dataService.get())

    $scope.save = function ( ) {

      dataService.set($scope.data)
    }

})

【讨论】：

我不确定您是否理解我的问题，尽管我可能没有清楚地表达它。我需要重置表单中的选定字段，而不是全部。角度的模式是什么？
你如何定义哪些字段需要重置，哪些不需要？
它们是模态的吗？即您一次只能编辑一个表单？

【解决方案2】：

我以前没有这样做过，但是您可以尝试以下方式：

<form>
<input type="text" ng-model="form1.element1" ng-change="a.foo=form1.element1"/>
<input type="text" ng-model="form1.element2" ng-change="b.bar=form1.element2"/>
</form>

<form>
<input type="text" ng-model="form2.element1" ng-change="b.bar[0].baz=form2.element1"/>
<input type="text" ng-model="form2.element2" ng-change="a.boo=form2.element2"/>
</form>

轻松引用您的表单特定元素。然后对于重置，您可以使用 angular.copy() 简单地重置具有初始值的 form1 或 form2 对象。

使用这种方法可能需要注意的一件事是，一旦您输入一些值并重置，尽管 form1 或 form2 将被重置，a 和 b 对象中可能仍有值，您可能需要处理（例如禁用提交）

【讨论】：