如何在angularjs中创建选项卡

Question

如何根据用户在ng-repeat中的angularjs中单击来隐藏或显示选项卡。

这是我的样品codepen in jquery它使用

$(this).attr 

我们如何能做到这一点的angularjs

Answer 1

您可以使用标签引导UI库： https://angular-ui.github.io/bootstrap/#/top

在互联网上，你可以找到另一标签示例。 这很容易教程标签： https://thinkster.io/angular-tabs-directive

我希望我帮助

Answer 2

如果您想编写自己的解决方案。在集合上添加一个属性，例如selectedItem并通过标签页上的ng-click进行设置。

在各自生成的div上，你可以添加一个ng-show="item.$parent.selectedItem === item"到相应的div，你会得到一个相当简单的标签控件。

Answer 3

可以使用NG-模板

template.html：

<ul> 
    <li ng-repeat="tab in tabs" 
     ng-class="{active:isActiveTab(tab.id)}" 
     ng-click="onClickTab(tab)">{{tab.title}}</li> 
    </ul> 
<div id="mainView"> 
     <div ng-include="currentTab"></div> 
    </div> 
    <script type="text/ng-template" id="1.html"> 
     <!-- content for tab1 --> 
    </script> 
    <script type="text/ng-template" id="2.html"> 
     <!-- content for tab2 --> 
    </script> 

Contrller.js $ scope.tabs = {[ 标题： '一'， ID：“1.HTML ' }，{ title：'Two'， id：'2.html' }];

$scope.currentTab = '1.html'; 

$scope.onClickTab = function (tab) { 
    $scope.currentTab = tab.id; 
} 

$scope.isActiveTab = function(tabUrl) { 
    return tabUrl == $scope.currentTab; 
}