如何在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; 
}