Javascript 表单控件的不同模板和作用域_Javascript_Angularjs_Angularjs Scope

Javascript 表单控件的不同模板和作用域

javascript angularjs

Javascript 表单控件的不同模板和作用域,javascript,angularjs,angularjs-scope,Javascript,Angularjs,Angularjs Scope,我是新的角度和发展。。。我想做一份登记表。要填写的登记簿可以是Autonomy或公司。当页面加载时，它加载自治表单，但您可以通过表单上方的链接在注册表单之间切换，一个用于自治表单，另一个用于公司表单。现在的大问题是，如何使用模板？假设每种类型的注册表表单都是一个模板，当您单击链接时切换模板，因此我必须在不同的范围内工作，因为我必须根据注册表类型（即模板）以不同的方式验证表单数据。我想在一个视图和控制器中完成所有这些（如果可能的话）。我不太知道怎么做。就像我说的，我是新来的。我想听听所

我是新的角度和发展。。。我想做一份登记表。要填写的登记簿可以是Autonomy或公司。当页面加载时，它加载自治表单，但您可以通过表单上方的链接在注册表单之间切换，一个用于自治表单，另一个用于公司表单。现在的大问题是，如何使用模板？假设每种类型的注册表表单都是一个模板，当您单击链接时切换模板，因此我必须在不同的范围内工作，因为我必须根据注册表类型（即模板）以不同的方式验证表单数据。我想在一个视图和控制器中完成所有这些（如果可能的话）。我不太知道怎么做。就像我说的，我是新来的。我想听听所有的可能性

<!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>


登记
D.左{
宽度：48.6%；
边界半径：5px；
背景色：#F2F2；
填充物：5px；
浮动：左；
}
戴维特先生{
宽度：48%；
边界半径：5px；
背景色：#F2F2；
填充物：5px 5px 5px；
浮动：左；
}
输入[类型=提交]{
宽度：100%；
背景色：#4CAF50；
颜色：白色；
填充：14px 20px；
利润率：8px0；
边界：无；
边界半径：4px；
高度：2米；
光标：指针；
}
输入[类型=提交]：悬停{
背景色：#45a049；
}
.自主的{
宽度：50%；
保证金：0；
浮动：左；
}
.自动：悬停{
背景色：#F2F2；
}
输入[类型=提交]{
宽度：100%；
背景色：#45a049；
颜色：白色；
填充：14px 20px 28px；
利润率：8px0；
边界：无；
边界半径：4px；
光标：指针；
}
输入[类型=提交]：悬停{
背景色：#4CAF50；
}
a{
文字装饰：无；
颜色：白色；
}
.typeLink{
文本对齐：居中；
利润底部：7%；
}
登记你的生意

谢谢。

这可以通过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的一个示例：

在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>

我来试一试并做一些研究。谢谢你的回答。