zoukankan      html  css  js  c++  java

  • [转]AngularJS+UI Router(1) 多步表单

    本文转自：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. }
  • 相关阅读:
    html实现 省——市——区三级联动
    test
    JAVA课程设计——坦克大战
    Java MOOC-互评作业-流与文件
    DS博客作业06--图
    DS博客作业08--课程总结
    DS博客作业07--查找
    DS博客作业06--图
    DS博客作业05-树
    DS博客作业01--日期抽象数据类型设计与实现
  • 原文地址：https://www.cnblogs.com/freeliver54/p/4488141.html
Copyright © 2011-2022 走看看