个人中心
gpt4 book ai didi

angularjs - 根据单击的按钮重定向到正确的表单

转载 作者：太空宇宙 更新时间：2023-11-03 23:32:28 25 4
gpt4 key购买 nike

我正在尝试使用 MEAN 堆栈进行以下作业。

  • 我创建了几个运行良好的注册表单。一个注册页面是index.html(通过 Angular 在其中加载多个 View /选项卡，因此它们是多页的)，另一个注册页面是index2.html。
    • 还有一个我创建的主网页，这是一个简单的页面，有公司的 Logo 、名称和两个按钮。
  • 点击每个按钮将引导您进行不同的注册表单(index.html 或index2.html)。最后一个功能是我遇到问题的地方。如何将主页连接到不同的注册表单？换句话说，当用户点击相应的按钮时，如何将他们重定向到正确的注册页面？我应该使用 Node 路由到正确的注册页面还是使用 Angular 路由？如您所见，目前我正在尝试使用 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>

这是 Angular 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'
        });
}]);

其中index.html是“数字”选项的注册表单，index2.html是“屏幕”选项的注册表单。如果有人需要查看这些注册表的代码，请告诉我谢谢

最佳答案

您需要使用 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: '/' }); 
}]);

关于angularjs - 根据单击的按钮重定向到正确的表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36582007/

25 4 0
文章推荐： javascript - 基于基于列表的菜单隐藏或显示 div 内容的最佳方法
文章推荐： c# - WPF-在 MainWindow 构造函数完成后运行方法
文章推荐： c# - 在 youtube api .net 中按 ID 获取 youtube 播放列表
文章推荐： html - 具有相同高度的 float div
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com