如何在angularjs中从一个选项卡切换到另一个选项卡？
提问于 2017-05-30 05:08:11
如何在angular 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>
回答 2
Stack Overflow用户
发布于 2017-05-30 05:19:21
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()//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>
Stack Overflow用户
发布于 2017-05-30 05:18:34
使用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');
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44253854
复制
腾讯云开发者
