本文转自：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. 自动化打包资源混淆集成python实践----打包

    1.自动化打包方案 1)友盟多渠道多渠道打包 2)gradle productFlavors系统的条件编译 3)美团打包 4)APK文件注释写入渠道号 2.各打包方案简介 1)友盟多渠道多渠道打包(w ...

  2. 【android】shape的使用

    例子:XML 文件保存在 res/drawable/gradient_box.xml: <?xml version="1.0" encoding="utf-8&qu ...

  3. CHImage

    1.启动图.图标 iOS应用图片尺寸制作脚本 ======= github 规格尺寸(官方) AppIcon应用图标 and Launchimage启动图标的制作 iPhone所有手机型号屏幕尺寸 2 ...

  4. json互转笔记

    JSON.parse()与JSON.stringify()的区别 JSON.parse()[从一个字符串中解析出json对象] 例子: //定义一个字符串 var data='{"name& ...

  5. Mysql 5.6主从搭建

    mysql设置主从的重要性和必要性不必多说,下面开始详细说明如何搭建主从. 1.主服务器上创建一个用于复制的账户. mysql'; mysql> flush privileges; 2.主服务器 ...

  6. java基础之语法和开发规则

    一. 代码书写的规则 以下面为例: 先写好结构 注意:为了避免错误,写代码时先把括号打齐,然后再补内容,每个”{}”里的内容开始写时要相比上一行多8个空格.为了方便可以用键盘上的 键代替(一般情况下时 ...

  7. ASP.NET-GridView之导出excel或word

    在CS阶段我们涉及到表格的导出,再Web开发同样可以实现,而且实现形式多种多样.以下面的例子说明表格导出到excel和word 这里用到了一个后台方法输出流形成***文件的的公共方法 DEMO < ...

  8. Linux 下的 etc

    /etc etc不是什么缩写,是and so on的意思 来源于 法语的 et cetera 翻译成中文就是 等等 的意思. 至于为什么在/etc下面存放配置文件, 按照原始的UNIX的说法(linu ...

  9. HashMap 1.8的源码分析二

    hashmap的构造方法: public HashMap(int initialCapacity, float loadFactor) { ) throw new IllegalArgumentExc ...

  10. 解决spring使用动态代理

    解决spring使用动态代理类型转换失败的问题--java.lang.ClassCastException: com.sun.proxy.$Proxy$ cannot be cast to ... 转 ...