Question

我是Angular和开发的新手......我想做一个注册表。要填写的登记册可以是自治的或公司的。页面加载时，它会加载自治表单，但您可以通过表单上方的链接切换注册表单，一个用于自治，一个用于公司。现在这个大问题，我怎样才能使用模板？让我们说每种类型的注册表单都是模板，当您单击链接切换模板时，我必须在不同的范围内工作，因为我必须验证表单数据的不同取决于寄存器类型（即模板）。我想在单个视图和控制器中执行所有这些操作（如果可能）。我不太清楚怎么做。就像我说的，我是Angular的新人。我想听听所有可能性。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Register</title>

    <style>
        .DivLeft {
            width: 48.6%;
            border-radius: 5px;
            background-color: #f2f2f2;
            padding: 5px;
            float: left;
        }

        .DivRight {
            width: 48%;
            border-radius: 5px;
            background-color: #f2f2f2;
            padding: 5px 5px 5px 5px;
            float: left;
        }

        input[type=submit] {
            width: 100%;
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            border-radius: 4px;
            height: 2em;
            cursor: pointer;
        }

        input[type=submit]:hover {
            background-color: #45a049;
        }

        .autonomous {
            width: 50%;
            margin: 0;
            float: left;
        }

        .autonomous:hover {
            background-color: #f2f2f2;
        }

        input[type=submit] {
            width: 100%;
            background-color: #45a049;
            color: white;
            padding: 14px 20px 28px;
            margin: 8px 0;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        input[type=submit]:hover {
            background-color: #4CAF50;
        }

        a {
            text-decoration: none;
            color: white;
        }

        .typeLink {
            text-align: center;
            margin-bottom: 7%;
        }
    </style>
</head>

<body style="background-color: #6e6e6e">
    <div class="container">
        <h2 style="text-align: center; color: white;">
            Register Your Business
        </h2>
        <div class="typeLink">
            <div class="autonomous">
                <a href="#">Autonomous</a>
            </div>
            <div class="autonomous">
                <a href="#">Company</a>
            </div>
        </div>
        <div style="clear: both"></div>
        <div>
            <form id="BusinessRegister">
                <div style="margin-bottom: 10px">
                    <div class="DivLeft">
                        <input type="text" placeholder="EIN" ng-model="regData.corpEin" />
                    </div>
                    <div class="DivRight">
                        <input type="text" placeholder="Corporate Name" ng-model="regData.corpName" />
                    </div>
                    <div style="clear: both"></div>
                    <div class="DivLeft">
                        <input type="email" placeholder="E-mail" ng-model="regData.corpEmail" />
                    </div>
                    <div class="DivRight">
                        <input type="text" placeholder="Phone" maxlength="9" ng-model="regData.corpPhone" />
                    </div>
                    <div style="clear: both"></div>
                    <div>
                        <input type="submit" value="Register" />
                    </div>
                </div>
            </form>
        </div>
</body>

</html>

感谢。

Answer 1

这可以通过使用Angular的$routeProvider服务来完成：

注意：您可以使用controller:

为不同的模板指定不同的控制器

yourapp.config(function($routeProvider){
    $routeProvider
    .when("/autonomous",{
        templateUrl: "autotemplate.html",
        controller: "autoController"
    })
    .when("/company",{
        templateUrl: "companytemplate.html",
        controller: "companyController"
    })

    .otherwise({
        redirectTo: "/autonomous"
    });
});

以下是关于w3c的示例：https://www.w3schools.com/angular/angular_routing.asp

在你的HTML中：

  <div class="typeLink">
        <div class="autonomous">
            <a href="#autonomous">Autonomous</a>
        </div>
        <div class="autonomous">
            <a href="#company">Company</a>
        </div>
    </div>

    <div ng-view>
        <!-- Template used will be replace here -->
    </div>

表单控件的不同模板和范围

1 个答案: