基於單擊按鈕指向正確的表單

我已經創建了幾個可以正常工作的註冊表單。一個註冊頁面是index.html（它通過Angular加載其中的多個視圖/標籤，因此它們是多頁面的），另一個是index2.html。
- 還有一個我已經創建的主頁面，這是一個簡單的頁面，有公司的標誌，名稱和兩個按鈕。
單擊每個按鈕將引導您註冊一個不同的註冊表表單（index.html或index2.html）。最後一個功能是我遇到問題的地方。我如何將主頁連接到不同的註冊表格？換句話說，當用戶點擊相應的按鈕時，如何將用戶重定向到正確的註冊頁面？我應該使用節點路由到正確的註冊頁面還是使用Angular Route？正如你所看到的，目前我正在嘗試使用Angular Route，但我不確定這是否是適合此目的的正確工具。任何幫助和方向將不勝感激。謝謝

這裏是我的主網頁（home.html做爲）代碼：

<html ng-app="myHome"> 
    <head> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
     <title>Home Page</title> 
     <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css" /> 
     <link rel="stylesheet" href"https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.css"/> 
     <link rel="stylesheet" href="/css/redirect.css"/> 
     <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"> </script> 
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" /> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><!--This is to call Angular JS--> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
     <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/bootstrap.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.js"></script> 
     <script src="/js/redirect.js"></script> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="row" id="rotate"> 
       <div class="col-md-6 col-md-offset-3"> 
        <img src="/css/Logo_75.png"> 
       </div> 
      </div> 
      <div class="row"> 
       <h1>WHAT TYPE OF QUOTE ARE YOU REQUESTING:</h1><br> 
       <h1>DIGITAL OR SCREEN QUOTE?</h1> 
      </div> 
      <div class="row"> 
       <div class="col-md-6 col-md-offset-3"> 
        <button type="button" class="btn btn-success"><a href="#/digital">DIGITAL QUOTE</a></button> 
        <button type="button" class="btn btn-success"><a href="#/screen">SCREEN QUOTE</a></button> 
       </div> 
      </div> 
     </div> 
    </body>

這是角JS文件：

var app = angular.module('myHome', [ngRoute]); 

.config(['$routeProvider', function($routeProvider) { 
    $routeProvider. 
     when('/digital', { 
      templateUrl: '/index.html' 
     }). 
     when('/screen', { 
      templateUrl: '/index2.html' 
     }). 
     otherwise({ 
      redirectTo: '/home.html' 
     }); 
}]);

其中指數.html是「數字」選項的註冊表單，index2.html是「屏幕」選項的註冊表單。如果有人需要查看這些註冊表格的代碼，請告訴我們謝謝

來源

2016-04-12 afzaaldeveloper1

您需要使用ng-view指令。改變你的容器你在裏面有內容看起來是這樣

<div class="container"> 
    <div ng-view></div> 
</div>

放入模板index.html，然後重命名您的index.html到digital.html和index2.html到screen.html與路由名稱對應（當然這是一個建議，因爲它使的感覺了很多，我相信）

和路由改變這種

var app = angular.module('myHome', [ngRoute]); 
.config(['$routeProvider', function($routeProvider) { 

    $routeProvider 
     .when('/', { templateUrl: '/index.html' }) 
     .when('/digital', { templateUrl: '/digital.html' }) 
     .when('/screen', { templateUrl: '/screen.html' }) 
     .otherwise({ redirectTo: '/' }); 
}]);

來源

2016-04-13 07:30:42 Molda

非常感謝Molda！ – afzaaldeveloper1

基於單擊按鈕指向正確的表單

回答

相關問題