[转]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模板

  9. 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">1 基本信息</a>
  8. <a ui-sref-active="active" ui-sref=".optional">2 选填项</a>
  9. <a ui-sref-active="active" ui-sref=".confirm">3 确认结果</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()"说明表单提交的时候运行的函数

  4. myApp.js  最重大之同组成部分

 

  1. //定义自己的module(myModule)
  2. //中括号中的是这个module的依赖
  3. var myModule = angular.module("myModule", ['ngAnimate','ui.router']);
  4. myModule.config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider) {
  5. $stateProvider
  6. .state('form',{
  7. url:'/form',
  8. templateUrl:'form.html',
  9. controller:'myFormController' //指明控制器
  10. })
  11. .state('form.required',{
  12. url:'/required',
  13. templateUrl:'form-required.html'
  14. })
  15. .state('form.optional',{
  16. url:'/optional',
  17. templateUrl:'form-optional.html'
  18. })
  19. .state('form.confirm',{
  20. url:'/confirm',
  21. templateUrl:'form-confirm.html'
  22. });
  23. $urlRouterProvider.otherwise('/form/required'); //匹配所有不在上面的路由
  24. }]);
  25. //定义模块的控制器
  26. myModule.controller('myFormController', ['$scope', function($scope){
  27. $scope.formData = {};
  28. $scope.submit = function() {
  29. alert("Cool, you have registered!");
  30. };
  31. }]);

 

  1. 代码说明都包含在注释中

  2. 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>
  17. <div class="form-group">
  18. <button ui-sref-active="active" ui-sref="form.optional" class="btn btn-success">下一项</button>
  19. </div>

  20. 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>

  11. 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>

  9. 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. }
  19. .form-view.ng-enter{
  20. -webkit-animation:slideToRight 0.5s both linear;
  21. -moz-animation:slideToRight 0.5s both linear;
  22. animation:slideToRight 0.5s both linear;
  23. }
  24. div.control a.active span{
  25. background-color: #666;
  26. color: #FFF;
  27. }
  28. div.control a{
  29. text-decoration: none;
  30. display: inline-block;
  31. width: 20%;
  32. }
  33. div.control a span{
  34. display: inline-block;
  35. width: 36px;
  36. height: 36px;
  37. border-radius: 36px;
  38. text-align: center;
  39. line-height: 36px;
  40. }
  41. .form-container{
  42. height: 399px;
  43. }
  44. .textarea{
  45. width: 100% !important;
  46. height: 60px !important;
  47. }

相关文章