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

时间：2018-04-23 14:56:29

标签： javascript html angularjs

我正在尝试在我的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>

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

enter image description here

我仍然希望标题和底部的按钮保留在所有标签中。我在这里缺少什么？

添加代码段here

2 个答案:

答案 0 :(得分：0)

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

对Angular Directives的引用

答案 1 :(得分：0)

这可能不是您正在寻找的答案，但是如果它只是您正在寻找的功能，您是否考虑过使用jQuery UI？ jQuery UI有一个名为“Tabs Widget”的效果，您可以在html页面中轻松实现

相关问题
最新问题