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

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>

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

Different templates and scopes for form control

javascript

angularjs

angularjs-scope