我正在使用ng-click和ng-show进行分页

时间:2017-04-23 07:04:41

标签: angularjs pagination

我正在使用ng-click和ng-show进行分页。在这种情况下,当点击按钮时它继续在两个方向上创建新页面,即它继续创建空白页面。它应分别停在第一页和最后一页。在这里,我创建了三个用于分页的子页面,按钮应仅针对这三个子页面播放。 期待任何帮助。 谢谢。

    <div class="container" ng-app="tabApp">
    <div class="row" ng-controller="TabController">
        <div class="col-md-2">
            <ul class="nav nav-pills nav-stacked">
                <li>
                    <a href ng-click="setTab(tab+1)" class="btn btn-primary btn-lg" role="button">Next</a>
                </li>
                <li>
                    <a href ng-click="setTab(tab-1)" class="btn btn-primary btn-lg" role="button">Back</a>
                </li>
            </ul>
        </div>
        <div class="col-md-8">
            <div class="jumbotron">
                <div ng-show="isSet(1)">
                    <h1>Home page</h1>
                    <p>Welcome to the website!</p>
                    <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
                </div>
                <div ng-show="isSet(2)">
                    <h1>Profile page</h1>
                    <p>Profile information</p>
                </div>
                <div ng-show="isSet(3)">
                    <h1>Messages</h1>
                    <p> Some messages </p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    angular.module('tabApp', [])
        .controller('TabController', ['$scope', function($scope) {
            $scope.tab = 1;

            $scope.setTab = function(newTab) {
                $scope.tab = newTab;
            };

            $scope.isSet = function(tabNum) {
                return $scope.tab === tabNum;
            };
        }]);

</script>

I have created a codepen

0 个答案:

没有答案