Html 单击导航按钮时如何显示表单

我正试图在我的研究基础上做一个项目，我想在这个网站上使用AngularJS，但我对nav有一个问题。当我点击导航时，表格不显示

这是导航代码

<nav>
<ul id="main_menu">
    <li><a class="active" ng-model="myVar"  value="Home" title="Home">Home</a></li>
    <li><a ng-model="myVar" value="Employees" title="New Employee">Register new Employee</a></li>
    <li><a ng-model="myVar" value="Customers" title="New Customer">Register new Customer</a></li>
    <li><a ng-model="myVar" value="Members" title="New Member">Register new Member</a></li>
</ul>
</nav>

家
登记新员工
注册新客户
登记新会员

这是我想在点击导航按钮时显示的表格

<div ng-switch="myVar">

    <div ng-switch-when="Home">
                <h2>Welcome to Gate's Corporate Portal </h2>

                    <p class="pindex animated rotateIn">
                    With this online application:<br>
                    Your can add New Employees,
                    New Customers,
                    and New Members 
                    </p>

        <div ng-switch-when="Employees">

        <div class="animated fadeInDown">
                    <form method="post" >
                    <legend>Register new Employee</legend>
                    <form method="post" action="employeesaction.php" >

                        <label for="name">Name:</label><input type="text" name="name"><br><br>
                        <label for="surname">Surname:</label><input type="text" name="surname"><br><br>
                        <label for="date_of_birth">Date of Birth:</label><input type="date" name="date_of_birth"><br><br>
                        <label for="telephone">Telephone:</label><input type="text" name="telephone"><br><br>
                        <label for="mobile">Mobile:</label><input type="text" name="mobile"><br><br>
                        <label for="email">Email:</label><input type="text" name="email"><br><br>
                        <label for="address">Address:</label><input type="text" name="address"><br><br>
                        <label for="tin">Tin:</label><input type="text" name="tin"><br><br>
                        <label for="employee_id">Employee id:</label><input type="text" name="employee_id"><br><br>         

                        <p class="center"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp;
                <button class="button1 animated flipInX" type="submit" value="Submit">Register</button> &nbsp; &nbsp; &nbsp; &nbsp; <button class="button2 animated flipInY" type="reset" value="reset">Clear form</button>     
                    </form>
                </div>
        </div>  
            <div ng-switch-when="Customers">
            <legend>Register new Customer</legend>
                    <form method="post" action="customersaction.php">

                        <label for="name">Name:</label><input type="text" name="name"><br><br>
                        <label for="surname">Surname:</label><input type="text" name="surname"><br><br>
                        <label for="telephone">Telephone:</label><input type="text" name="telephone"><br><br>
                        <label for="mobile">Mobile:</label><input type="text" name="mobile"><br><br>
                        <label for="customers_company">Customers company:</label><input type="text" name="customers_company"><br><br>
                        <label for="email">Email:</label><input type="text" name="email"><br><br>
                        <label for="address">Address:</label><input type="text" name="address"><br><br>
                        <label for="tin">Tin:</label><input type="text" name="tin"><br><br>
                        <p class="center"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp;
                <button class="button1 animated flipInX" type="submit" value="Submit">Register</button> &nbsp; &nbsp; &nbsp; &nbsp; <button class="button2 animated flipInY" type="reset" value="reset">Clear form</button></p>
            </div>  
        <div ng-switch-when="Members">
            <div class="animated fadeInDown">
                    <legend >Register new Member</legend>
                    <form  method="post" action="membersaction.php">

                        <label for="name">Name:</label><input type="text" name="name"><br><br>
                        <label for="surname">Surname:</label><input type="text" name="surname"><br><br>
                        <label for="telephone">Telephone:</label><input type="text" name="telephone"><br><br>
                        <label for="mobile">Mobile:</label><input type="text" name="mobile"><br><br>
                        <label for="email">Email:</label><input type="text" name="email"><br><br>

                    <p class="center"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp;
                <button class="button1 animated flipInX" type="submit" value="Submit">Register</button> &nbsp; &nbsp; &nbsp; &nbsp; <button class="button2 animated flipInY" type="reset" value="reset">Clear form</button></p>
                    </form>
                    <br><br><br><br><br><br><br><br><br><br>
                </div>
        </div>
    </div>

欢迎来到盖茨的企业门户网站

使用此在线应用程序：

您可以添加新员工，
新客户，
和新成员

登记新员工
名称：


姓氏：


出生日期：


电话：


手机：


电子邮件：


地址：


锡：


员工id:



登记清楚表格
注册新客户
名称：


姓氏：


电话：


手机：


客户公司：


电子邮件：


地址：


锡：



登记清楚表格
登记新会员
名称：


姓氏：


电话：


手机：


电子邮件：



登记清楚表格

在您的

中，您似乎正在尝试使用一种可以使用单选按钮的方法，但无法使用

元素。使用

完成此操作的方法如下所示：

<nav>
<ul id="main_menu">
    <li><a ng-click="updateMyVar('Home')" class="active" title="Home">Home</a></li>
    <li><a ng-click="updateMyVar('Employees')" title="New Employee">Register new Employee</a></li>
    <li><a ng-click="updateMyVar('Customers')" title="New Customer">Register new Customer</a></li>
    <li><a ng-click="updateMyVar('Members')" title="New Member">Register new Member</a></li>
</ul>
</nav>

---

您也可以跳过该函数，只使用

ng click=“myVar='Home'”

等，但我更喜欢尽量避免在视图中放置逻辑。我尝试了一下，但这次打开html文件时主页上显示的表单对此有何建议？我发现您缺少开头

的结束标记。也许这与问题有关？我在进行更改并关闭时看到了这一点。有什么建议吗？

$scope.updateMyVar = function(value) {
    $scope.myVar = value;
};