在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頁面中輕松實現

在HTML頁面中設置選項卡-AngularJS

問題描述

2 個解決方案

解決方案1
0 2018-04-23 16:52:30

ngSwitch

說明-ngSwitch

ngIf

說明-ngIf

角度指令的引用

解決方案2
0 2018-04-23 17:52:43

在HTML頁面中設置選項卡-AngularJS

問題描述

2 個解決方案

解決方案1 0 2018-04-23 16:52:30

ngSwitch

說明-ngSwitch

ngIf

說明-ngIf

角度指令的引用

解決方案2 0 2018-04-23 17:52:43

解決方案1
0 2018-04-23 16:52:30

解決方案2
0 2018-04-23 17:52:43