本文转自：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. WebGoat系列实验Buffer Overflows & Code Quality & Concurrency

    WebGoat系列实验Buffer Overflows & Code Quality & Concurrency Off-by-One Overflows 实验需要访问OWASP Ho ...

  2. GUID介绍

    GUID介绍 GUID(Global unique identifier)全局唯一标识符,它是由网卡上的标识数字(每个网卡都有唯一的标识号)以及 CPU 时钟的唯一数字生成的的一个 16 字节的二进制 ...

  3. Linux文件锁flock ,检测进程是否已经存在

    在多个进程同时操作同一份文件的过程中,很容易导致文件中的数据混乱,需要锁操作来保证数据的完整性,这里介绍的针对文件的锁,称之为“文件锁”-flock.  头文件:#include<sys/fil ...

  4. Java打包多文件成zip

    package com.zh.java.util; import lombok.extern.slf4j.Slf4j; import java.io.File;import java.io.FileI ...

  5. ps 常用命令

    1.ps aux:显示所有进程信息 2.ps -u root:显示指定用户信息 3.ps -ef:显示所有进程信息,连同命令行 ps -ef|grep ssh 4.ps -axjf 显示程序树 5.p ...

  6. 如何在Linux上使用x2go设置远程桌面

    Until ACS supports Spice, if ever,you're better off with "on-VM" softare such RDP for Wind ...

  7. bzoj3328: PYXFIB（单位根反演+矩阵快速幂）

    题面 传送门 题解 我们设\(A=\begin{bmatrix}1 & 1 \\ 1 & 0\end{bmatrix}\),那么\(A^n\)的左上角就是\(F\)的第\(n\)项 所 ...

  8. SQLException: Incorrect string value: '\xE4\xB8\xAD\xE5\x9B\xBD' for column at row 1

    这个是由于新建数据库没有选择默认字符集导致的,只要选择utf8即可. 如果以上还无法解决,那可能是表里的varchar字符集也不对

  9. linux文件系统相关资料

             linux下文件系统通常是通过虚拟文件系统(VFS)蔽下层具体文件系统操作的差异,为上层的操作提供一个统一的接口.文件系统底层都是用系统IO缓存层提供的块读写接口,实现逻辑块到物理块 ...

  10. C# web项目添加*.ashx文件后报错处理

    说明:我是菜鸟,博文水平有限,仅作学习过程中的备忘笔记 1.截图信息: ———————————————————————————————————————————————————————————————— ...