Question

如何在角度js中从一个标签切换到另一个标签？我使用多个div来创建标签。我想通过单击按钮从一个选项卡切换到另一个选项卡。这是我的代码的一部分 -

<div ng-controller="MyController">

  <div class="tabgroup" ng-init="tab=1">
    <div class="tab" ng-class="{selected: tab==1}" ng-click="tab = 1">Home</div>
    <div class="tab" ng-class="{selected: tab==2}" ng-click="tab = 2">Display Records</div>
    <div class="tab" ng-class="{selected: tab==3}" ng-click="tab = 3">Add Records</div>
    <div class="tab" ng-class="{selected: tab==4}" ng-click="tab = 4">Remove Records</div>
  </div>
  <div class="otherContainer">
    <div class="tabcontents">
      <div ng-show="tab == 1">
        This application shows employee details registered for this site. You can add your records by clicking on add button. Also you can update and delete records.
      </div>
      <div ng-show="tab == 2">

        <table border=1>
          <thead>
            <th>Id</th>
            <th>Name</th>
            <th>Birthdate</th>
            <th>Address</th>
            <th>Contact</th>
            <th>Email</th>

          </thead>
          <tr data-ng-repeat="Emp in EmpList">
            <td ng-bind="Emp.Id"></td>
            <td ng-bind="Emp.Name"></td>
            <td ng-bind="Emp.Birthdate"></td>
            <td ng-bind="Emp.Address"></td>
            <td ng-bind="Emp.Contact"></td>
            <td ng-bind="Emp.Email"></td>

            <th><input type="button" ng-click="removeItem()" value="Remove" /></th>
            <th><input type="button" ng-click="editItem(i)" value="Edit" /></th>
          </tr>
        </table>
      </div>

Answer 1

＆＃13;

You can refer the following sample
//in your controller

// code to switch you views based on tabs
$scope.onep = true; // sets bydefault true on div
$scope.one = function() {
  $scope.onep = true;
  $scope.twop = false;
  $scope.threep = false;
}

//follow as above for funcions two() and three()

＆＃13;

//your tabs
<div ng-click=one()>
  //div content
</div>
<div ng-click=two()>
  //div content
</div>
<div ng-click=three()>
  //div content
</div>

<p ng-show=onep></p>
<p ng-show=twop></p>
<p ng-show=threep></p>

＆＃13;

Answer 2

使用JavaScript解决此问题很容易解决问题。

<div class="tab" data-target="#tab1" ng-class="{selected: tab==1}" ng-click="goToTab(1)">Home</div>

在您的控制器中

$scope.goToTab = function(tabIndex) {
    $scope.tab = tabIndex;
    angular.element('[data-target="#tab'+tabIndex+'"]').tab('show');
}

如何在angularjs中从一个标签切换到另一个标签？

2 个答案: