ng-submit和ng-click之间的差异

时间:2014-05-08 21:41:42

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

在angularjs中,我想知道ng-submit和ng-click之间的区别是什么?具体来说,每个人的利弊何时应该是一个还是另一个?谢谢!
**编辑**
我已经更多地了解了这一点,但我仍然想知道使用ng-submit的好处是什么(如果有的话)?您是否可以使用ng-click代替所有ng-submit?这会导致任何问题吗?再次感谢!

5 个答案:

答案 0 :(得分:39)

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

来自MDN:

  

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

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

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

来自source

  

ngClick指令允许您指定自定义行为   单击元素。

使用它可以让您的用户以提交表单以外的其他方式与您的网页进行互动。也许点击“上一个”或“下一个”寻呼机按钮,或者可能是地图或其他东西。

答案 1 :(得分:24)

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

答案 2 :(得分:15)

我最喜欢使用data = {} async.each hosts, (host, cb_e) -> dns.lookup host, (err, address, family) -> data[host] = address cb_e(err) , () -> console.log data 的原因是,它允许您在关注表单输入等时按ng-submit键,表单将提交。 (当然假设表格中有一个<Enter>的按钮。)

与按键上的type="submit"相比,它的键盘友好性和可访问性更加友好,因为使用ng-click,用户可以点击提交按钮,或者按ng-submit

答案 3 :(得分:4)

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

    <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。只有在表单有效时,或者换句话说,表单的所有用户输入都有效时,才会调用此提交函数。请记住,在这种情况下,如果表格无效,则不会提交

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

即使表格无效,我们也可以提交表格 对于无效输入,控制器中的值设置为undefined

答案 4 :(得分:3)

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