Question

这是我的示例代码，我使用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>

现在我想要激活Item0，第一次页面被堵塞。再次，当我们移动到下一系列选项卡时，应该激活第一个选项卡。（即来回移动时）。

Answer 1

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

只需添加ng-class="{'active': $index == 0}"，这意味着〜为ng-repeater中的第一个元素设置活动类并为内容标签添加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>

如何设置class =＆＃34; active＆＃34;当使用迭代生成N个选项卡（引导程序）时？

1 个答案: