javascript - 防止 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)，每个模型中也只存在一个名字和名字副本。这到底是怎么回事？

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);