Как создать вкладки в angularjs

Question

Как скрыть или показать вкладки в соответствии с щелчками пользователя в angularjs в ng-repeat.

это мой образец 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

Вы можете использовать нг-шаблон

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 = [{ название: 'One', идентификатор: «1.html ' }, { название:' Two ', id:' 2.html ' }];

$scope.currentTab = '1.html'; 

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

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