如何在angularjs中创建选项卡

Question

如何根据ng-repeat中的angularjs中的用户点击隐藏或显示标签。

这是我使用的样本codepen in jquery

 $(this).attr

我们怎么能在angularjs中做到这一点

Answer 1

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

在相应的生成的div上，您可以将ng-show="item.$parent.selectedItem === item"添加到相应的div中，您将获得一个相当简单的选项卡控件。

Answer 2

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

在互联网上，您可以找到标签的另一个示例。 这是标签的简单教程： https://thinkster.io/angular-tabs-directive

我希望我帮助

Answer 3

您可以使用ng-template

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'         }，{             标题：'两个'，             id：'2.html'         }];

$scope.currentTab = '1.html';

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

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