AngularJS 不会发送隐藏字段值-JavaScript中文网-JavaScript教程资源分享门户

在使用AngularJS时，您可能已经遇到过该框架不会发送隐藏表单字段的值的情况。这是因为AngularJS默认忽略了所有未显示在DOM中的输入元素，包括隐藏字段。本文将探讨在AngularJS中处理隐藏字段的方法以及如何解决这个问题。

问题描述

当您在表单中添加一个隐藏的字段，并尝试将其提交到服务器时，您可能会发现该字段的值并没有被发送。在AngularJS应用程序中，这就是期望的行为，因为框架默认忽略了它们。

<form>
    <input type="hidden" name="example" ng-model="example" value="123">
    <button type="submit">Submit</button>
</form>

在上面的代码中，当用户点击提交按钮时，表单将被提交，但是名为“example”的隐藏字段的值不会被包含在请求中。

解决方法

要发送隐藏字段的值，可以通过一些简单的步骤来修改AngularJS的默认行为。

步骤1：禁用隐藏字段的忽略

要禁用AngularJS对隐藏字段的忽略，需要在表单元素中添加ng-app和ng-submit属性。

<form ng-app="" ng-submit="submitForm()">
    <input type="hidden" name="example" ng-model="example" value="123">
    <button type="submit">Submit</button>
</form>

在上面的代码中，我们添加了ng-app和ng-submit指令，并将表单的提交操作绑定到submitForm函数。这将防止AngularJS忽略隐藏字段。

步骤2：手动序列化表单数据

现在，当表单被提交时， AngularJS将忽略隐藏字段以外的所有未显示在DOM中的输入元素。因此，我们需要手动序列化表单数据，并将其发送到服务器。

-- -------------------- ---- -------
-------- ------------ -
    --- ---- - ---
    --- ------ - ---------------------------------------
    --- ---- - - -- - - -------------- ---- -
        --- ----- - ----------
        -- ------------ -- ---------- --- --------- -
            ---------------- - ------------
        -
    -

    -- -- ----- - --------- ----
-

在上述代码中，submitForm函数遍历表单中的所有输入元素，并将除隐藏字段外的所有元素的名称和值存储在一个对象中。然后，您可以使用 $http 或 $resource 将数据发送到服务器。

结论

由于AngularJS默认忽略了所有未显示在DOM中的输入元素，包括隐藏字段，因此可能会导致一些问题。通过添加ng-app和ng-submit指令以及手动序列化表单数据，我们可以解决这个问题。希望本文能够帮助您更好地理解AngularJS的行为，并在开发中避免一些潜在的问题。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/25048