开发者社区> 青衫无名> 正文

AngularJS 提交表单的方式 【已翻译100%】(2/2)

简介:
+关注继续查看

简洁语法
这个例子是以字符串的方式发送数据,并且发送你的头信息。如果你不需要这些,并且希望Angular 的$http POST尽可能的简洁,我们可以使用简写方法:

...
    $http.post('process.php', $scope.formData)
        .success(function(data) {
            ...
        });
...

绝对更简洁更容易记住方法。

$http 内部控制器: 理想的,你可以将$http请求从controller移除到 service.这只是为了演示目的,我们将会尽快在service上进行讨论.

在视图中显示错误和信息

我们将使用指令ng-show和ng-class来处理我们的视图,Angular双方括号允许我们将变量放置在我们需要的地方。

ng-show: 根据变量值是否存在来显示或隐藏元素. 文档
ng-class: 根据变量值是否存在(或一些其他表达式)来添加或移除类. 文档

<!-- index.html -->

...

    <!-- SHOW ERROR/SUCCESS MESSAGES -->
    <div id="messages" ng-show="message">{{ message }}</div>

    <!-- FORM -->
    <form>
        <!-- NAME -->
        <div id="name-group" class="form-group" ng-class="{ 'has-error' : errorName }">
            <label>Name</label>
            <input type="text" name="name" class="form-control" placeholder="Bruce Wayne">
            <span class="help-block" ng-show="errorName">{{ errorName }}</span>
        </div>

        <!-- SUPERHERO NAME -->
        <div id="superhero-group" class="form-group" ng-class="{ 'has-error' : errorSuperhero }">
            <label>Superhero Alias</label>
            <input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader">
            <span class="help-block" ng-show="errorSuperhero">{{ errorSuperhero }}</span>
        </div>

...

我们的表单完成了!通过强大的Angular,我们可以将这些愚蠢的显示/隐藏的js代码逻辑从视图中移走 了。现在我们的js文件只用来处理数据,并且视图可以做它自己的事情了。

我们的类和错误/成功等提示信息将在可获取时显示而不可获取时隐藏。当我们无须再像使用老的javascript那样担心是否已经考虑全面,这变得更加容易。你也无须再担心是否记得隐藏每处form提交时的那些错误信息。

Angular表单验证 获取更多表单验证的信息,请研读我们另一文章:AngularJS Form Validation。

结束语

现在我们已把美观的表单全部转变为Angular的了。我们共同学习了许多概念,希望你与它们接触更多,它们也将更易用。

回顾:

  • 创建一个Angular module
  • 创建一个Angular controller
  • 双向数据绑定
  • ng-model绑定inputs
  • ng-click提交表单
  • 使用双向数据绑定展示表单错误
  • 展示一个基于是否变量存在的div
  • 添加一个基于是否变量存在的类

这些Angular技术将在更庞大的应用中使用,你可以用它们创建许多好东西。祝Angular之途愉快,敬请期待更多深入的文章。同时,你也可以通过深入了解其指南,服务和厂商等来继续学习Angular。

查看代码 : https://github.com/scotch-io/submitting-forms-angular

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JS端自己拼接一个表单进行提交:实现下载或者传参后台
JS端自己拼接一个表单进行提交:实现下载或者传参后台
1681 0
【氚云】通过前端代码实现表单提交时的再次确认
通过前端代码实现表单提交时的再次确认
94 0
LayUI表单提交数据为空
本文目录 1. 现象 2. 解决方案
44 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
20697 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
18999 0
JSP 用户提交请求
当用户第一次请求一个jsp页面时,首先被执行的方法是构造方法 就是转换为class文件后,他会创建一个Servlet的实例,然后调用Servlet的构造方法,再调用jspInit()方法 ​(1)JSP引擎先把该JSP文件转换成一个Java源文件(Servlet),在转换时如果发现JSP文件有任何语法错误,转换过程将中断,并向服务端和客户端输出出错信息。
643 0
MVC项目开发中那些用到的知识点(Jquery ajax提交Json后台处理)
前言   jQuery提供的ajax方法能很方便的实现客户端与服务器的异步交互,在asp.net mvc 框架使用jQuery能很方便地异步获取提交数据,给用户提供更好的体验!  调用jQuery的ajax方法时,jQuery会根据post或者get协议对参数data进行序列化;   如果提交...
924 0
ajax提交表单和文件上传
说明 文件上传用到就jar包 mavne依赖 commons-fileupload commons-fileupload 1.
950 0
+关注
3598
文章
840
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载