【问题标题】:differences between ng-submit and ng-clickng-submit 和 ng-click 的区别
【发布时间】:2014-05-08 21:41:41
【问题描述】:

在 angularjs 中,我想知道 ng-submit 和 ng-click 之间有什么区别?具体来说,每种方法的优缺点,什么时候应该选择其中一种?谢谢!
**编辑**
我对此进行了更多研究,但我仍然想知道使用 ng-submit 有什么好处(如果有的话)?您可以使用 ng-click 代替所有 ng-submits 吗?这会引起任何问题吗?再次感谢!

【问题讨论】:

  • 两者都只是原生浏览器事件的包装器。
  • 这是一篇有趣的帖子,可能有助于揭开这个问题的神秘面纱bit.ly/1TUTAAz

标签: angularjs submit form-submit angularjs-ng-click


【解决方案1】:

ngSubmit 指令绑定到浏览器中的submit event,在提交表单时触发。

来自 MDN:

请注意,提交仅在表单元素上触发,而不是按钮或提交输入。 (提交的是表单,而不是按钮。)

因此您可以使用它来提交用户注册表单或类似的东西。

另一方面,ngClick 指令可以应用于任何类型的元素。

来自source

ngClick 指令允许您指定自定义行为,当 元素被点击。

使用它允许您的用户以某种方式与您的页面进行交互,而不是提交表单。可能是单击“上一个”或“下一个”寻呼按钮,或者可能是地图或其他东西。

【讨论】:

    【解决方案2】:

    除非元素具有 actiondata-actionx-action,否则 Angular 会阻止默认操作(向服务器提交表单)指定的属性。因此,当使用没有这些属性的表单使用角度时,ng-clickng-submit 可用于指定要调用的 javascript 方法。在任一调用中,您都可以获得由于角度的双向数据绑定属性,范围内的所有输入值。 您可以使用 ng-click 代替所有 ng-submits 吗?这会导致任何问题吗?
    可以使用,但是使用 ng-click 时不考虑 html 输入属性(如 required、min-max、maxlength)并立即执行方法体。

    【讨论】:

    • 谢谢,这消除了误解。因此,对于提交表单,首选 ng-submit。对于任何其他交互,可以使用 ng-click。
    • when using ng-click it does not take html input attributes (like required,min-max,maxlength) into account and executes method body immediately............ +1 揭开这个神秘面纱!
    【解决方案3】:

    我最喜欢使用ng-submit 的原因是它允许您在专注于表单输入等时按下<Enter> 键,然后表单将提交。 (当然假设您在表单中有一个type="submit" 按钮。)

    与按钮上的ng-click 相比,它对键盘和可访问性更友好,因为使用ng-submit,用户可以单击提交按钮,也可以按<Enter>

    【讨论】:

    • 我只是在测试这个,它似乎通过按两种方式输入来运行该功能。我认为这也是 ngSubmit 的一个好处,但从我刚才的测试来看,这两种方式的行为似乎都是一样的。
    • 原谅我,但我不明白如果没有ng-submit,该函数如何运行。在表单上放置ng-submit 属性允许您定义当您专注于所述表单的元素之一时按下<Enter> 键时运行的函数。如果您没有 ng-submit,您将如何定义要在 <Enter> 上运行的函数?
    • 如果将“类型”按钮更改为提交,它会做同样的事情(
    【解决方案4】:

    如果我们希望表单在无效时不被提交,那么我们将在表单本身上使用 ng-submit 指令而不是 ng-click 按钮

        <div class="row">
            <form name="adduser" ng-submit="AddUser(adduser.$valid)">                   
                <div id="name-group" class="form-group-lg">
                    <input type="text"
                           required
                           name="name"
                           ng-model="userfullName"
                           class="form-control"
                           placeholder="Full Name">
                </div>
    

    在 ng-submit 中,我们使用参数 formname.$valid 从控制器调用函数 AddUser。这个提交函数只会在表单有效时调用,或者换句话说,表单的所有用户输入都是有效的。请记住,在这种情况下,如果表单无效,则不会提交 from

    当我们使用 ng-click 时,即使表单无效也会被提交。 ng-click 的两个观察结果如下:

    即使表单无效,我们也能够提交表单 对于无效输入,该值在控制器中设置为未定义

    【讨论】:

      【解决方案5】:

      ng-submit 与表单相关联,当您提交表单时会触发此事件。 ng-click 可以在没有表单提交事件的情况下工作

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2016-10-28
        • 1970-01-01
        • 2015-10-12
        相关资源
        最近更新 更多