碼上歡樂
相關內容    簡體    繁體

[轉]AngularJS+UI Router(1) 多步表單

本文轉載自   查看原文   2015-05-08 16:44   2707    AngularJs/ JavaScript/Jquery/ExtJS

本文轉自：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. }


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 [轉]AngularJS 使用 UI Router 實現表單向導 angularjs ui-router傳值 angularJs的ui-router總結 AngularJs ui-router 路由的簡單介紹 angularjs:[1] ui-router 權限控制 AngularJS 的嵌套路由 UI-Router angularJs模塊ui-router之狀態嵌套和視圖嵌套 AngularJS ui-router (嵌套路由)的簡單學習 AngularJS路由系列(6)-- UI-Router的嵌套State angularJS中的ui-router和ng-grid模塊
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM