防止 AngularJS 中跨路由的字段输入重复

Question

我有两个表单在我的应用程序的不同页面上相互重复，它们执行的功能略有不同。它们看起来像这样（去掉额外的代码）：

<form role="form" name="myForm" ng-submit="processForm()"
    novalidate>
    <div>
        <fieldset id="basicForm">       
            <div id="firstname" class="form-group">
                <div class="input-group" id="inputSection">
                    <input id="firstNameInput" title="Input first name"
                        type="text" class="form-control form-custom basicInput"
                        name="firstname" placeholder="First Name"
                        ng-model="myForm.formData.firstname" maxlength="20"
                </div>
            </div>
        </fieldset>
    </div>
</form>

还有这个：

<form role="form" name="myFormCopy" ng-submit="processForm()"
    novalidate>
    <div>
        <fieldset id="basicForm">       
            <div id="firstname" class="form-group">
                <div class="input-group" id="inputSection">
                    <input id="firstNameInput" title="Input first name"
                        type="text" class="form-control form-custom basicInput"
                        name="firstname" placeholder="First Name"
                        ng-model="myFormCopy.formData.firstname" maxlength="20"
                </div>
            </div>
        </fieldset>
    </div>
</form>

如您所见，这些字段是相同的，只是表单具有不同的名称和不同的 ng-model。

我注意到，当从应用程序中的一个页面更改为另一个页面时，如果我在一个页面上的此字段中键入，该文本将自动出现在另一页面上的匹配字段中。尝试调试它，似乎一页上模型中的数据将在另一页上的模型中重复。

有没有办法避免这种情况？即使更改模型名称（例如 myForm.formData.firstname 和 myFormCopy.formData.firstnamecopy），每个模型中都只存在一个 firstname 和 firstnamecopy。这到底是怎么回事？

Answer 1

您的变量“formData”很可能是两种表单的完全相同的对象实例。 对象在 javascript 中被引用，假设你这样做了

var o1 = { a: 99 };
var o2 = o1;
o2.a = 100;
console.log (o1);

然后你会得到 a 是 100，因为当你改变 o2 时，你也会改变 o1，因为它是同一个对象。 如果您不希望这种情况发生，您将不得不创建一个所谓的深层副本（如果您还不知道该术语，您将迫切需要搜索该术语） 的第一个对象。 如何做到这一点取决于您可以访问的允许框架。 例如，在 jQuery 中，这将是一个解决方案：

var newObject = jQuery.extend(true, {}, oldObject);