本文转自：https://www.zybuluo.com/dreamapplehappy/note/54448

多步表单的实现

 

在线demo演示地址https://rawgit.com/dreamapplehappy/AngularJS-uiRouter/master/index.html

 

文件的构成

说明：先新建一个文件夹(例如：router)，然后新建下面的文件。

  • index.html
  • form.html
  • form-required.html
  • form-optional.html
  • form-confirm.html
  • myApp.js
  • myStyle.css
 

详解每个文件的代码

  • index.html  代码如下：
 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>多步表单</title>
  6. <link rel="stylesheet" href="lib/bootstrap.min.css">
  7. <link rel="stylesheet" href="myStyle.css">
  8. <script src="lib/angular.js"></script>
  9. <script src="lib/angular-ui-router.js"></script>
  10. <script src="lib/angular-animate.js"></script>
  11. <script src="myApp.js"></script>
  12. </head>
  13. <body ng-app="myModule">
  14. <div class="container" ng-controller="myFormController">
  15. <div ui-view></div>
  16. </div>
  17. </body>
  18. </html>
 
  1. 代码说明：
  2. ng-app="myModule" 表示AngularJS启动的开始
  3. ng-controller="myFormController" 表示这整个div由控制器myFormController来控制
  4. 新建一个lib文件夹，放在router目录下
  5. 外部引入的angular.js，angular-ui-router.js，angular-animate.js，bootstrap.min.css都放在这个文件夹中
  6. 这个demo的路由配置放在myApp.js里面
  7. demo的样式文件放在myStyle.css里面
  8. <div ui-view></div>这个div包含ui-view说明里面放置的是html模板
  • form.html
 
  1. <div class="row">
  2. <div class="col-sm-8 col-sm-offset-2">
  3. <div class="form-container">
  4. <div>
  5. <h2>欢迎注册Dreamapple!</h2>
  6. <div class="control">
  7. <a ui-sref-active="active" ui-sref=".required"><span>1</span> 基本信息</a>
  8. <a ui-sref-active="active" ui-sref=".optional"><span>2</span> 选填项</a>
  9. <a ui-sref-active="active" ui-sref=".confirm"><span>3</span> 确认结果</a>
  10. </div>
  11. <hr />
  12. </div>
  13. <form ng-submit="submit()">
  14. <div class="form-view" ui-view></div>
  15. </form>
  16. </div>
  17. <hr />
  18. <pre>
  19. {{ formData }}
  20. </pre>
  21. </div>
  22. </div>
 
  1. 代码说明：
  2. ui-sref=".required"说明当点击这个链接的时候路由会跳转到相应的包含required状态的路由中。
  3. ng-submit="submit()"说明表单提交的时候运行的函数
  • myApp.js  最重要的一部分
 
  1. //定义自己的module(myModule)
  2. //中括号中的是这个module的依赖
  3. var myModule = angular.module("myModule", ['ngAnimate','ui.router']);
  5. myModule.config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider) {
  6. $stateProvider
  7. .state('form',{
  8. url:'/form',
  9. templateUrl:'form.html',
  10. controller:'myFormController' //指明控制器
  11. })
  12. .state('form.required',{
  13. url:'/required',
  14. templateUrl:'form-required.html'
  15. })
  16. .state('form.optional',{
  17. url:'/optional',
  18. templateUrl:'form-optional.html'
  19. })
  20. .state('form.confirm',{
  21. url:'/confirm',
  22. templateUrl:'form-confirm.html'
  23. });
  25. $urlRouterProvider.otherwise('/form/required'); //匹配所有不在上面的路由
  26. }]);
  27. //定义模块的控制器
  28. myModule.controller('myFormController', ['$scope', function($scope){
  29. $scope.formData = {};
  30. $scope.submit = function() {
  31. alert("Cool, you have registered!");
  32. };
  33. }]);
 
  1. 代码说明都包含在注释中
  • form-required.html
 
  1. <div class="form-group">
  2. <label for="username">用户名：</label>
  3. <input type="text" class="form-control" name="username" ng-model="formData.username">
  4. </div>
  5. <div class="form-group">
  6. <label for="password">密码：</label>
  7. <input type="password" class="form-control" name="password" ng-model="formData.password">
  8. </div>
  9. <div class="form-group">
  10. <label for="cp">确认密码：</label>
  11. <input type="password" class="form-control" name="cp" ng-model="formData.cp">
  12. </div>
  13. <div class="form-group">
  14. <label for="email">邮箱：</label>
  15. <input type="email" class="form-control" name="email" ng-model="formData.email">
  16. </div>
  18. <div class="form-group">
  19. <button ui-sref-active="active" ui-sref="form.optional" class="btn btn-success">下一项</button>
  20. </div>
  • form-optional.html
 
  1. <div class="form-group">
  2. <label for="gender">您的性别：</label>
  3. <input type="radio" value="man" class="form-control" ng-model="formData.gender">男
  4. <input type="radio" value="woman" class="form-control" ng-model="formData.gender">女
  5. </div>
  6. <br />
  7. <div class="form-group">
  8. <button ui-sref-active="active" ui-sref="form.required" class="btn btn-success">上一项</button>
  9. <button ui-sref-active="active" ui-sref="form.confirm" class="btn btn-success">下一项</button>
  10. </div>
  • form-confirm.html
 
  1. <div class="form-group">
  2. <label for="interest">选择你喜欢的语言：</label>
  3. <input type="checkbox" value=".net" class="form-control" ng-model="formData.interestA">.NET
  4. <input type="checkbox" value="php" class="form-control" ng-model="formData.interestB">PHP
  5. <input type="checkbox" value="nodejs" class="form-control" ng-model="formData.interestC">NodeJS
  6. <hr />
  7. <button type="submit" class="btn btn-primary">注册</button>
  8. </div>
  • myStyle.css
 
  1. @keyframes slideToRight {
  2. from { transform:translateX(100%); }
  3. to { transform: translateX(0); }
  4. }
  5. @-moz-keyframes slideToRight {
  6. from { -moz-transform:translateX(100%); }
  7. to { -moz-transform: translateX(0); }
  8. }
  9. @-webkit-keyframes slideToRight {
  10. from { -webkit-transform:translateX(100%); }
  11. to { -webkit-transform: translateX(0); }
  12. }
  13. .form-view.ng-enter{
  14. position: absolute;
  15. transition:0.5s all linear;
  16. -moz-transition:0.5s all linear;
  17. -webkit-transition:0.5s all linear;
  18. }
  20. .form-view.ng-enter{
  21. -webkit-animation:slideToRight 0.5s both linear;
  22. -moz-animation:slideToRight 0.5s both linear;
  23. animation:slideToRight 0.5s both linear;
  24. }
  26. div.control a.active span{
  27. background-color: #666;
  28. color: #FFF;
  29. }
  30. div.control a{
  31. text-decoration: none;
  32. display: inline-block;
  33. width: 20%;
  34. }
  35. div.control a span{
  36. display: inline-block;
  37. width: 36px;
  38. height: 36px;
  39. border-radius: 36px;
  40. text-align: center;
  41. line-height: 36px;
  42. }
  43. .form-container{
  44. height: 399px;
  45. }
  46. .textarea{
  47. width: 100% !important;
  48. height: 60px !important;
  49. }

[转]AngularJS+UI Router(1) 多步表单的更多相关文章

  1. 【js类库AngularJs】学习angularJs的指令（包括常见表单验证，隐藏等功能）

    [js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀 ...

  2. angularJS ui router 多视图单独刷新问题

    场景:视图层级如下 view1 --view11 --view111 需求:view11的一个动作过后,单独刷新view12 解决方式:修改层级设计 view1 --view11 --view111 ...

  3. [AngularJS] AngularJS系列(3) 中级篇之表单验证

    目录 基本验证 验证插件messages 自定义验证 基本验证 <form name="form" novalidate ng-app> <span>{{f ...

  4. AngularJS快速入门指南13：表单

    一个AngularJS表单是一组输入型控件的集合. HTML控件 HTML输入型标签标包括: input标签 select标签 button标签 textarea标签 HTML表单 HTML表单将各种 ...

  5. AngularJs轻松入门（六）表单校验

    表单数据的校验对于提高WEB安全性意义不大,因为服务器接收到的请求不一定来自我们的前端页面,有可能来自别的站点,黑客可以自己做一个表单,把数据提交到我们的服务器(即跨站伪造请求),这样就绕过了前端页面 ...

  6. 微信小程序组件构建UI界面小练手 —— 表单登录注册微信小程序

    通过微信小程序中丰富的表单组件来完成登录界面.手机快速注册界面.企业用户注册界面的微信小程序设计. 将会用到view视图容器组件.button按钮组件.image图片组件.input输入框组件.che ...

  7. 简单web页面第一步---表单

    1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncod ...

  8. Angularjs ui router,路由嵌套 父controller执行问题

    解决方式来源:https://stackoverflow.com/questions/25316591/angularjs-ui-router-state-reload-child-state-onl ...

  9. AngularJS 使用 UI Router 实现表单向导

    Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...

随机推荐

  1. Bulma 源码解析之 .columns 类

    {说明} 这一部分的源码内容被我简化了,另外我还额外添加了一个辅助类 is-grow. .columns // 修饰类 &.is-centered justify-content: cente ...

  2. JVM-jvm学习大纲（0）

    1.详细jvm内存模型 2.讲讲什么情况下回出现内存溢出,内存泄漏? 3.说说Java线程栈 4.JVM 年轻代到年老代的晋升过程的判断条件是什么呢? 5.JVM 出现 fullGC 很频繁,怎么去线 ...

  3. PLSQL连接Oracle11g 64位

    目前plsql只有32位的,而Oracle11则是64位的,想要连接需要下载这个: 打开plsql,在Tools-->Prefences里面设置,如下图: 设置Oracle的主目录:下载文件解压 ...

  4. Delphi xe6 android Popup控件的使用

    1.拖放Label.button和popup控件到form 2.在structure将button1和label1拖到popup1上,然后调整布局就可以 Popup有几个重要的属性: 1.Placem ...

  5. C# SendMessage用法一二

    函数功能:该函数将指定的消息发送到一个或多个窗口.此函数为指定的窗口调用窗口程序,直到窗口程序处理完消息再返回.而函数PostMessage不同,将一个消息寄送到一个线程的消息队列后立即返回.  函数 ...

  6. 微信开放平台 redirect_uri参数错误

    微信开放平台 redirect_uri参数错误   请注意是开放平台开放平台,公众平台和开放平台不是同一个. 解决办法 在写 授权回调域 时,地址只用写到域名级,不能写到域名下一级,这和QQ互联的回调 ...

  7. Python3中开发目录的引用

    Python3中开发目录的引用 import os,sys BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) ...

  8. （原创）团体程序设计天梯赛-练习集 L1-048 矩阵A乘以B （15 分)

    给定两个矩阵A和B,要求你计算它们的乘积矩阵AB.需要注意的是,只有规模匹配的矩阵才可以相乘.即若A有R​a​​行.C​a​​列,B有R​b​​行.C​b​​列,则只有C​a​​与R​b​​相等时,两 ...

  9. iOS 上的相机捕捉 swift

    第一台 iPhone 问世就装有相机.在第一个 SKDs 版本中,在 app 里面整合相机的唯一方法就是使用 UIImagePickerController,但到了 iOS 4,发布了更灵活的 AVF ...

  10. Vuex基础-Module

    官方API地址:https://vuex.vuejs.org/zh/guide/modules.html 前面几节课写的user.js就称为一个module,这样做的原因是:由于使用单一状态树,应用的 ...