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

Question

I have a simple tab system but I'm a bit stuck on exactly how to make this work. 我有一个简单的制表符系统，但是我对如何使它正常工作有些困惑。

I'm using ng-repeat to spit out the tabs and the content and so far this is working fine. 我正在使用ng-repeat吐出选项卡和内容，到目前为止，一切正常。

Here are my tabs: 这是我的标签：

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

And here's the repeated content which needs to match up to the tabs: 这是需要与标签匹配的重复内容：

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

And finally, my function (the console log returns the correct indexes from the tabs) 最后，我的功能（控制台日志从选项卡返回正确的索引）

$scope.activeTab = function(i) {

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

}

Any suggestions on how I should go about this? 关于我应该如何处理的任何建议？ I've looked into ng-show, ng-switch and ng-if to show and hide the appropriate content but I've been stuck on this for a while... 我研究了ng-show，ng-switch和ng-if来显示和隐藏适当的内容，但是我已经坚持了一段时间。

Many thanks! 非常感谢！

Answer 1

You can use tabset concept using bootstrap js. 您可以通过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>

and below use ng-template to put your code. 下面使用ng-template放置您的代码。

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

Your tab id and ng-include will be the same like script ng-template id. 您的标签ID和ng-include将与脚本ng-template id相同。

You can make number of ng-template as number of your tabs. 您可以将ng-template的数量作为选项卡的数量。

Answer 2

I have recently looked into a way of making the bootstrap tab work with angular without the need for bootstrap.js and the like. 我最近研究了一种使bootstrap选项卡与angular一起使用的方式，而无需bootstrap.js等。 I'm pretty happy with what I ended up with. 我对最终结果感到非常满意。

This is the html: 这是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>

It uses a navigation controller, which is this: 它使用导航控制器，它是：

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());
    });
}]);

I hope you can use this. 希望您可以使用。

Answer 3

Just keep track of the index of the tab clicked and show/modify content based on the index. 只需跟踪单击的选项卡的索引，然后根据索引显示/修改内容即可。

http://plnkr.co/edit/nkdUJD6GMZHGEpXpDRoN?p=preview 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

There are several different ways to approach this. 有几种不同的方法可以解决此问题。 But first, let's think about the steps to made the tab component: 但是首先，让我们考虑一下制作标签组件的步骤：

Initialize a current tab 初始化当前标签页
Create a method to set the currenet tab 创建一种方法来设置“ currenet”选项卡
Create a method to return which is the current tab 创建一个返回方法，即当前选项卡

That said, let's craft a simple controller here: 就是说，让我们在这里设计一个简单的控制器：

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
    };
  });

Now you can use the methods from the controller in your template to decide which tab should be visible. 现在，您可以使用模板中控制器中的方法来确定哪个选项卡应可见。 You can use any of the core directives that show/hide elements (ng-show, ng-hide, ng-if or ng-switch). 您可以使用任何显示/隐藏元素的核心指令（ng-show，ng-hide，ng-if或ng-switch）。 I wouldn't recommend you to use ng-switch since it introduces a lot of extra markup (and complexity). 我不建议您使用ng-switch，因为它会引入很多额外的标记（和复杂性）。

About ng-if vs ng-show, from the AngularJS official docs: 关于ng-if vs ng-show，来自AngularJS官方文档：

ngIf differs from ngShow and ngHide in that ngIf completely removes and recreates the element in the DOM rather than changing its visibility via the display css property. ngIf与ngShow和ngHide的不同之处在于ngIf会完全删除并重新创建DOM中的元素，而不是通过display css属性更改其可见性。 A common case when this difference is significant is when using css selectors that rely on an element's position within the DOM, such as the :first-child or :last-child pseudo-classes. 这种差异很明显的常见情况是使用依赖于DOM中元素位置的css选择器，例如：first-child或：last-child伪类。

Now you can choose the one that best suit your needs. 现在，您可以选择最适合您的需求的一种。

You can also take a look at this video from the free and great course of AngularJS by Code School for more infos. 您也可以观看Code School提供的免费和出色的AngularJS课程的视频，以获取更多信息。

If you want to go a step further, learn how to create custom directives and build an awesome tab directive! 如果您想更进一步，请学习如何创建自定义指令并构建出色的Tab指令！

Answer 5

Just change your content repeat div to this and you should be fine (it works for me at least): 只需将您的内容重复div更改为此，就可以了（至少对我有用）：

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

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

问题描述

5 个解决方案

解决方案1
0 2014-08-22 12:39:19

解决方案2
0 2014-08-22 12:56:42

解决方案3
0 2014-08-22 12:56:52

解决方案4
0 2014-08-22 13:07:28

解决方案5
0 2014-08-22 13:19:45

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

问题描述

5 个解决方案

解决方案1 0 2014-08-22 12:39:19

解决方案2 0 2014-08-22 12:56:42

解决方案3 0 2014-08-22 12:56:52

解决方案4 0 2014-08-22 13:07:28

解决方案5 0 2014-08-22 13:19:45

解决方案1
0 2014-08-22 12:39:19

解决方案2
0 2014-08-22 12:56:42

解决方案3
0 2014-08-22 12:56:52

解决方案4
0 2014-08-22 13:07:28

解决方案5
0 2014-08-22 13:19:45