如何设置class＝“;活动的”;当使用迭代生成N个选项卡(引导程序）时

how to set class="active" when there are N number of tabs(bootstrap) generating using iteration?

本文关键字：迭代选项引导程序 class 设置何设置活动更新时间：2023-09-26

这是我的示例代码，我正在使用ng repeat（angular js指令）生成一系列选项卡。当我使用class="active"时，它显示所有选项卡的内容，因为它为所有选项卡设置了class="active

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Demo Application</title>
      <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 101 Template</title>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <link href="css/bootstrap.min.css" rel="stylesheet">
      <link href="animation.css" rel="stylesheet" type="text/css">
      <script src="angular.min.js"></script>
      <script src="angular-animate.js"></script>

    </head>
    <body ng-app="myApp" ng-controller="MyCtrl">
     <div class="container">
      <div class="row">
         <ul class="nav nav-tabs nav-justified"  role="tablist" id="myTab">
            <li ng-repeat="item in data | startFrom:currentPage*pageSize | limitTo:pageSize"><a href="#{{item}}"  role="tab" data-toggle="tab" >
                {{item}}
                </a>
            </li>
        </ul>
               <div class="tab-content">
                                    <div ng-repeat="item in data" id="{{item}}" class="tab-pane">
                                        {{item}}
                                    </div>
                                </div>

       <div style="text-align:center; margin-top:50px;">
        <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
            Previous
        </button>
        {{currentPage+1}}/{{numberOfPages()}}
        <button ng-disabled="currentPage >= data.length/pageSize - 1" ng-click="currentPage=currentPage+1">
            Next
        </button>
        </div>
    </div>
    </div>
    </body>
    <script>
        var app=angular.module('myApp', []);
        app.controller('MyCtrl', function($scope){
           $scope.currentPage = 0;
        $scope.pageSize = 10;
        $scope.data = [];
        $scope.numberOfPages=function(){
            return Math.ceil($scope.data.length/$scope.pageSize);                
        }
        for (var i=0; i<45; i++) {
            $scope.data.push("Item"+i);
        }
        });
    app.filter('startFrom', function() {
        return function(input, start) {
            start = +start; //parse to int
            return input.slice(start);
        }
    });
    </script>

    </html>

现在我希望第0项被激活，第一次当页面被打开时。再次，当我们移动到下一系列选项卡时，第一个选项卡应该被激活。（即在来回移动时）。

请参阅此处http://jsbin.com/zayadosuguni/2/edit

只需添加ng-class="{'active': $index == 0}"，这意味着为ng中继器中的第一个元素设置活动类对于内容选项卡，添加ng-class="{'active': $index == (pageSize * currentPage) }"

<div class="container">
    <div class="row">
        <ul class="nav nav-tabs nav-justified" role="tablist" id="myTab">
            <li ng-repeat="item in data | startFrom:currentPage*pageSize | limitTo:pageSize"><a href="#{{item}}" role="tab" data-toggle="tab" ng-class="{'active': $index == 0}">
          {{item}} 
                </a>
            </li>
        </ul>
        <div class="tab-content">
            <div ng-repeat="item in data" id="{{item}}" class="tab-pane" ng-class="{'active': $index == (pageSize * currentPage) }">Content of {{item}} {{}}</div>
        </div>