本文转自：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. CodeForces 785D Anton and School - 2 (组合数学)

    题意:有一个只有’(‘和’)’的串,可以随意的删除随意多个位置的符号,现在问能构成((((((…((()))))….))))))这种对称的情况有多少种,保证中间对称,左边为’(‘右边为’)’. 析:通 ...

  2. CodeForces 404C Restore Graph (构造)

    题意:让人构造一个图,满足每个结点边的数目不超过 k,然后给出每个结点到某个结点的最短距离. 析:很容易看出来如果可能的话,树是一定满足条件的,只要从头开始构造这棵树就好,中途超了int...找了好久 ...

  3. 多线程学习-基础（ 十一）synchronized关键字修饰方法的简单案例

    一.本案例设计到的知识点 (1)Object的notify(),notifyAll(),wait()等方法 (2)Thread的sleep(),interrupt(). (3)如何终止线程. (4)如 ...

  4. SQLyog使用，连接ubuntu虚拟机(Error No.2003)

    1.为mysql设置远程访问权限 mysql> grant all PRIVILEGES on *.* to ‘账号’@’%’ identified by ‘密码′; mysql> flu ...

  5. 如何破解IDEA

    https://blog.csdn.net/samery1020/article/details/79489164 http://idea.lanyus.com/ 我们在选择JAVA 使用IDEA时都 ...

  6. Binder学习笔记（十一）—— 智能指针

    轻量级指针 Binder的学习历程爬到驱动的半山腰明显感觉越来越陡峭,停下业务层的学习,补补基础层知识吧,这首当其冲的就是智能指针了,智能指针的影子在Android源码中随处可见.打开framewor ...

  7. php 过滤掉多维数组空值

    //过滤掉空值 function filter_array($arr, $values = ['',[]]){ foreach ($arr as $k => $v) { if (is_array ...

  8. 在Python中正确使用Unicode

    正确处理文本,特别是正确处理Unicode.是个老生常谈的问题,有时甚至会难倒经验丰富的开发者.并不是因为这个问题很难,而是因为对软件中的文本,开发者没有正确理解一些关键概念及其表示方法.在Stack ...

  9. Jquery学习理解 （课堂）

    Jquary概述 3 1.Jquary简介 3 1.1什么是jquery 3 2.使用jquary 4 2.1浏览器如何解析HTML文件 4 2.2利用选择器定位节点 4 2.3调用方法操作节点 5 ...

  10. Ubuntu安装SHH服务

    1.打开"终端窗口",输入"sudo apt-get update"-->回车-->"输入当前登录用户的管理员密码"--> ...