Question

我有一个简单的标签系统，但我有点坚持如何使这项工作。

我使用ng-repeat吐出标签和内容，到目前为止，这种方式正常。

以下是我的标签：

<ul class="job-title-list">
     <li ng-repeat="tab in tabBlocks">
        <a href="javascript:;" ng-click="activeTab($index)">dummy content</a>
     </li>
</ul>

以下是需要与标签匹配的重复内容：

<div ng-repeat="content in contentBlocks">
    <p>more dummy content</p>
</div>

最后，我的函数（控制台日志从选项卡返回正确的索引）

$scope.activeTab = function(i) {

   $scope.selectedTab = i
   console.log($scope.selectedTab)

}

关于我应该怎么做的任何建议？我已经查看了ng-show，ng-switch和ng-if是否显示和隐藏了相应的内容，但我已经坚持了一段时间...

非常感谢！

Answer 1

您可以使用bootstrap js。

来使用tabset概念

<tabset>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled" id="{{tab.href}}">
 <div ng-include="tab.href"></div>
</tab>
</tabset>

及以下使用ng-template来放置代码。

<script type="text/ng-template" id="tab.href">
<div>
 Testing Div
</div>

您的标签ID和ng-include与脚本ng-template id相同。

您可以将ng-template的数量设为选项卡的编号。

Answer 2

我最近研究过一种使引导选项卡与angular一起工作的方法，而不需要bootstrap.js等。我对最终的结果非常满意。

这是html：

<ul class="nav nav-tabs" data-ng-controller="NavigationCtrl">
    <li data-ng-repeat="tab in tabs"
        data-ng-class="{'active': activeTab === tab }">
        <a ng-click="go(tab)" href="">{{ tab.title }}</a>
    </li>
</ul>

<div class="tab-content" data-ng-controller="NavigationCtrl">
    <div data-ng-repeat="tab in tabs" class="tab-pane"
         data-ng-class="{'active': activeTab === tab }" id="content">
         <div data-ng-view></div>
    </div>
</div>

它使用导航控制器，即：

app.controller("NavigationCtrl", ["$scope", "$location", function ($scope, $location) {

    // all the tabs and their ng-view locations
    $scope.tabs = [
        { id: 'content', title: 'random content', route: '/content' },
        { id: 'dialog', title: 'dialog', route: '/dialog' },
        { id: 'form', title: 'some form', route: '/form' },
        { id: 'grid', title: 'some grids', route: '/grid' }
    ];

    // Initially start with the first tab 
    $scope.activeTab = $scope.tabs[0];

    // this gets the tab object from a location/route
    var tabByRoute = function (route) {
        for (var i = 0; i < $scope.tabs.length; i++) {
            if ($scope.tabs[i].route === route) {
                return $scope.tabs[i];
            }
        }

        return $scope.tabs[0];
    };

    $scope.go = function (tab) {
        $location.path(tab.route);
    };

    // If the path is changed in some other part of the application, this event fires.
    $scope.$on("$locationChangeSuccess", function () {
        $scope.activeTab = tabByRoute($location.path());
    });
}]);

我希望你能用它。

Answer 3

只需跟踪所点击标签的索引，然后根据索引显示/修改内容。

http://plnkr.co/edit/nkdUJD6GMZHGEpXpDRoN?p=preview

<!DOCTYPE html>
<html>

<head>
<script src="https://code.angularjs.org/1.3.0-  beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
  .active{border-color:red;}
</style>
</head>

<body ng-controller="test">
<h1>Hello Plunker!</h1>
<div ng-repeat="tab in data">
  <button ng-class="{active:uiModel.activeIndex==$index}" 
          ng-click="uiModel.activeIndex=$index">{{tab}}</button>
</div>
<div ng-repeat="tab in data" 
     ng-show="uiModel.activeIndex==$index">{{$index}}</div>
<script>
  var app=angular.module("app",[]);
  app.controller("test",function($scope){
    $scope.data=["tab1","tab2","tab3"];
    $scope.uiModel={activeIndex : 0}
  });
  angular.bootstrap(document,[app.name]);
</script>
</body>

Answer 4

有几种不同的方法可以解决这个问题。但首先，让我们考虑制作标签组件的步骤：

初始化当前标签
创建一个设置currenet选项卡的方法
创建一个返回哪个方法是当前标签

那就是说，让我们在这里制作一个简单的控制器：

angular.module('myApp', [])
  .controller('MyCtrl', function() {
    this.tabBlocks = ['ta', 'tb', 'tc'];
    this.contentBlocks = ['ca', 'cb', 'cc'];

    this.tab = 1; // 1

    this.setTab = function(tab) {
      this.tab = tab; // 2
    };

    this.isSet = function(tab) {
      return this.tab === tab; // 3
    };
  });

现在，您可以使用模板中控制器的方法来确定哪个选项卡应该可见。您可以使用任何显示/隐藏元素的核心指令（ng-show，ng-hide，ng-if或ng-switch）。我不建议你使用ng-switch，因为它引入了很多额外的标记（和复杂性）。

关于ng-if vs ng-show，来自AngularJS官方文档：

ngIf与ngShow和ngHide的不同之处在于ngIf完全删除并重新创建DOM中的元素而不是更改它通过display css属性实现可见性。这个常见的情况差异很重要的是当使用依赖于的css选择器时元素在DOM中的位置，例如：first-child或：last-child伪类。

现在您可以选择最适合您需求的那种。

您还可以从Code School的AngularJS免费和精彩课程中查看此video以获取更多信息。

如果您想更进一步，请了解如何创建自定义directives并构建一个很棒的制表符指令！

Answer 5

只需将您的内容重复div更改为此，您应该没事（至少对我有用）：

<div ng-show="$index==selectedTab" ng-repeat="content in contentBlocks">
<p>more dummy content</p>
</div>

如何使用Angular JS根据索引进行过滤？

5 个答案: