在HTML页面中设置选项卡-AngularJS

Question

我试图在我的html页面中设置选项卡，并且代码与此类似：

<form name="requestForm">
  <div class="form-group col-md-6 md-padding">
    <div class="text-primary">
        <h3>Create Request</h3>
    </div>

    <div class="tab">
        <button class="tablinks" onclick="openCity(event, 'General')">General</button>
        <button class="tablinks" onclick="openCity(event, 'Contact')">Contact</button>
    </div>

    <div id="General" class="tabcontent">
        <div>
            <label style="font-size: medium">Contact Name</label>
              ......
        </div>
        <div>
            <label style="font-size: medium">Project</label>
            ......
        </div>
    </div>

    <div id="Contact" class="tabcontent">
        <div>
            <label style="font-size: medium">Site</label>
            .....
        </div>
        <div>
            <label style="font-size: medium">Location</label>
              ....
        </div>
     </div>
     <div class="md-padding col-md-6">
     <div class="row form-group">
       <button type="button" class='btn btn-danger' ng-click="clearRequest(requestForm)">Clear</button>
       <button type="button" class="btn btn-success" ng-disabled="!requestForm.$valid" ng-click="createRequest(requestForm)">Create</button>
     </div>
    </div>
  </div>
</form>

我希望可以在“联系人”选项卡的“常规”选项卡，“站点和位置”中看到“联系人和项目”。 但这不起作用

我仍然希望标题和底部的按钮保留在所有选项卡中。 我在这里想念什么？

在此处添加代码段

Answer 1

ngSwitch

有几种方法可以做到这一点，但是我认为您最想寻找的一种方法（如果您不想在控制器中进行任何处理）是使用ng-switch和ng-switch-when指令：

片段已更新： 现在默认显示“常规”选项卡。 检查控制器代码注释。

 (function() { "use strict"; var app = angular.module("myApp", []); app.controller("myController", myController); myController.$inject = ["$scope"]; function myController($scope) { // You can also just use the assignment below to set the General Tab as the default tab (instead of using the Default Template & ng-switch-default directive // $scope.showTab = "general"; } })(); 

 <head> <meta charset="utf-8" /> <title>Show Tabs</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script> </head> <body ng-app="myApp" ng-controller="myController"> <form name="requestForm"> <div class="form-group col-md-6 md-padding"> <div class="text-primary"> <h3>Create Request</h3> </div> <div class="tab"> <button class="tablinks" ng-click="showTab='general'">General</button> <button class="tablinks" ng-click="showTab='contact'">Contact</button> </div> <!-- GENERAL template --> <div ng-switch="showTab"> <div id="General" class="tabcontent" ng-switch-when="general"> <div> <label style="font-size: medium">Contact Name</label> ...... </div> <div> <label style="font-size: medium">Project</label> ......</div> </div> <!-- CONTACT template --> <div id="Contact" class="tabcontent" ng-switch-when="contact"> <div> <label style="font-size: medium">Site</label> ..... </div> <div> <label style="font-size: medium">Location</label> .... </div> </div> <!-- DEFAULT template --> <div id="Default" class="tabcontent" ng-switch-default> <div> <label style="font-size: medium">Contact Name</label> ...... </div> <div> <label style="font-size: medium">Project</label> ......</div> </div> </div> <div class="md-padding col-md-6"> <div class="row form-group"> <button type="button" class='btn btn-danger' ng-click="clearRequest(requestForm)">Clear</button> <button type="button" class="btn btn-success" ng-disabled="!requestForm.$valid" ng-click="createRequest(requestForm)">Create</button> </div> </div> </div> </form> </body> 

说明-ngSwitch

我没有向您的代码段添加任何样式更改，但是功能就在那里。

我确实认为将您的处理工作移到控制器上并创建用于每个选项卡的通用/通用html模板是一种好习惯。 但是，如果您的标签页将来不会动态加载并保留2-3个标签页，则可以使用。

查看下面的代码注释，以了解ng-switch在这种情况下的工作方式摘要：

<!-- Create a scope variable and add the name of the form you would like to toggle -->
<div class="tab">
   <button class="tablinks" ng-click="showTab='general'">General</button>
   <button class="tablinks" ng-click="showTab='contact'">Contact</button>
</div>

<!-- Define the switch attribute to evaluate in a container div -->
<div ng-switch="showTab">

    <!-- Shows the 'template' div when your attribute value matches the 'switch-when' condition -->
    <div id="General" class="tabcontent" ng-switch-when="general">
       <!-- Your template html / content goes here -->
    </div>

</div>

ngIf

正如评论者提出的主要问题所建议的那样，您还可以对相同的结果使用ng-if指令： <div id="Contact" class="tabcontent" ng-if="showTab === 'contact'"> 。

 (function() { "use strict"; var app = angular.module("myApp", []); app.controller("myController", myController); myController.$inject = ["$scope"]; function myController($scope) { $scope.showTab = "general"; } })(); 

 <head> <meta charset="utf-8" /> <title>Show Tabs</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script> </head> <body ng-app="myApp" ng-controller="myController"> <form name="requestForm"> <div class="form-group col-md-6 md-padding"> <div class="text-primary"> <h3>Create Request</h3> </div> <div class="tab"> <button class="tablinks" ng-click="showTab='general'">General</button> <button class="tablinks" ng-click="showTab='contact'">Contact</button> </div> <!-- GENERAL template --> <div id="General" class="tabcontent" ng-if="showTab === 'general'"> <div> <label style="font-size: medium">Contact Name</label> ...... </div> <div> <label style="font-size: medium">Project</label> ......</div> </div> <!-- CONTACT template --> <div id="Contact" class="tabcontent" ng-if="showTab === 'contact'"> <div> <label style="font-size: medium">Site</label> ..... </div> <div> <label style="font-size: medium">Location</label> .... </div> </div> <div class="md-padding col-md-6"> <div class="row form-group"> <button type="button" class='btn btn-danger' ng-click="clearRequest(requestForm)">Clear</button> <button type="button" class="btn btn-success" ng-disabled="!requestForm.$valid" ng-click="createRequest(requestForm)">Create</button> </div> </div> </div> </form> </body> 

说明-ngIf

我认为ng-if用途更广，而ng-switch用途更广（适合这种特定情况）。

区别在于ng-if接受多个条件来评估showTab ，而ng-switch仅接受一个条件。

因此，如果您需要检查showTab 和其他一些值（例如，是否已加载服务器中的所有数据或特定对象的状态），则可以使用ng-if 。

示例： <div id="General" class="tabcontent" ng-if="showTab === 'general' && allDataRetrieved">

角度指令的引用

• ngClick
• ngSwitch
• ngIf

Answer 2

这可能不是您要寻找的答案，但是如果您只是在寻找功能，您是否考虑过将jQuery UI用于选项卡？ jQuery UI具有一种称为“标签小工具”的效果，您可以在html页面中轻松实现