使用角度js分页不起作用

时间:2015-03-19 09:06:23

标签: html angularjs

这是我的控制器。

这是我的申请清单

 $scope.appList = {
            "applications": [
                {
                    "name": "sampleapp",
                    "type": "war",
                    "desc": "testing",
                    "status": "started",
                    "appKey": "P+sdr",
                    "appId": "PsdrhU66RQb24",
                    "url": "http://hhhh.com"
                },

                {
                    "name": "test",
                    "type": "war",
                    "desc": "test",
                    "status": "Not Deployed",
                    "appKey": "0mIQ/",
                    "appId": "0mIQFKviPy",
                    "url": "No url available"
                },

                {
                    "name": "test1",
                    "type": "war",
                    "desc": "test",
                    "status": "Not Deployed",
                    "appKey": "0mIQ/FKuJ02o=",
                    "appId": "0mIQFK1426751424112",
                    "url": "No url available"
                },
                {
                    "name": "test2",
                    "type": "war",
                    "desc": "test",
                    "status": "Not Deployed",
                    "appKey": "0mIQ/FKviPxuJ02o=",
                    "appId": "0mIQFK1424112",
                    "url": "No url available"
                },
                {
                    "name": "test3",
                    "type": "war",
                    "desc": "test",
                    "status": "Not Deployed",
                    "appKey": "0mIQ/FKo=",
                    "appId": "0mI112",
                    "url": "No url available"
                },
                {
                    "name": "test4",
                    "type": "war",
                    "desc": "test",
                    "status": "Not Deployed",
                    "appKey": "0mIQ/FKGlmxuJ02o=",
                    "appId": "0mI751424112",
                    "url": "No url available"
                },
                {
                    "name": "test5",
                    "type": "war",
                    "desc": "test",
                    "status": "Not Deployed",
                    "appKey": "0mIQ/FKvxuJ02o=",
                    "appId": "0m02o=1426751424112",
                    "url": "No url available"
                },
                {
                    "name": "test6",
                    "type": "war",
                    "desc": "test",
                    "status": "Not Deployed",
                    "appKey": "0mIQ/FKvmxuJ02o=",
                    "appId": "0mI+-4545412",
                    "url": "No url available"
                },
                {
                    "name": "test7",
                    "type": "war",
                    "desc": "test",
                    "status": "Not Deployed",
                    "appKey": "0mIQ/FKviPy02o=",
                    "appId": "0mIQFmxuJ02o=14264112",
                    "url": "No url available"
                },
                {
                    "name": "test8",
                    "type": "war",
                    "desc": "test",
                    "status": "Not Deployed",
                    "appKey": "0mIQ/mxuJ02o=",
                    "appId": "0mIQF6751424112",
                    "url": "No url available"
                },
                {
                    "name": "test9",
                    "type": "war",
                    "desc": "test",
                    "status": "Not Deployed",
                    "appKey": "0mIQ/FKvuJ02o=",
                    "appId": "0mIQFKv1424112",
                    "url": "No url available"
                },
                {
                    "name": "test10",
                    "type": "war",
                    "desc": "test",
                    "status": "Not Deployed",
                    "appKey": "0mIQ/FKmxuJ02o=",
                    "appId": "0mIQF1424112",
                    "url": "No url available"
                },
                {
                    "name": "test11",
                    "type": "war",
                    "desc": "test",
                    "status": "Not Deployed",
                    "appKey": "0mIQ/uJ02o=",
                    "appId": "0mIQFK1424112",
                    "url": "No url available"
                },
                {
                    "name": "test12",
                    "type": "war",
                    "desc": "test",
                    "status": "Not Deployed",
                    "appKey": "0mIQ/xuJ02o=",
                    "appId": "0mI6751424112",
                    "url": "No url available"
                },
                {
                    "name": "test13",
                    "type": "war",
                    "desc": "test",
                    "status": "Not Deployed",
                    "appKey": "0mIQ/FKviPyKZnSwOOGlmxuJ02o=",
                    "appId": "0mIQFKviPyKZnSwOOGlmxuJ02o=1426751424112",
                    "url": "No url available"
                },
                {
                    "name": "test14",
                    "type": "war",
                    "desc": "test",
                    "status": "Not Deployed",
                    "appKey": "0mIQ/FKJ02o=",
                    "appId": "0mIQFKvi24112",
                    "url": "No url available"
                }
            ]

        };

        /*--------- Get All Application List ----------*/
        $scope.AllApplicationList = []
        $scope.get_appList = function() {
            console.log("in Refresh");

            //console.log(data.applications);
            $scope.AllApplicationList = $scope.appList.applications;
            //console.log($scope.AllApplicationList);



            };
        $scope.get_appList();

        $scope.filteredTodos = []
        $scope.currentPage = 1;
        $scope.numPerPage = 2;
        $scope.maxSize = 3;

      $scope.makeTodos = function() {
        $scope.todos = [];
        for (i=1;i<=16;i++) {
          $scope.todos.push($scope.appList.applications);
        }
        //alert($scope.todos);
      };
      $scope.makeTodos(); 

      $scope.numPages = function () {
        alert($scope.todos.length);
        return Math.ceil($scope.todos.length / $scope.numPerPage);

      };

      $scope.$watch('currentPage + numPerPage', function() {
        var begin = (($scope.currentPage - 1) * $scope.numPerPage)
        , end = begin + $scope.numPerPage;

        $scope.filteredTodos = $scope.todos.slice(begin, end);
      });

这是我的HTML

<div class="row">
            <div class="col-lg-12">
                <div class="accordion">
                    <table class="table table-bordered"
                        id="table-pagination">
                        <thead>
                            <tr>
                                <th>Application Details</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="app_list in AllApplicationList | filter:search">
                                <td>
                                     <div id="app_list-{{$index + 1}}" ng-model="collapsed" ng-click="collapsed=!collapsed" class="panel panel-default accordion-section">
                                        <div class="panel-body">
                                            <div class="col-lg-6 col-xs-12 col-sm-6">
                                                <div class="game_app1 clickable_div"
                                                    href="#accordion-{{$index}}">
                                                    <i class="start_img"></i>
                                                    <div>
                                                        <h4>{{app_list.name}}</h4>
                                                        <p>{{app_list.type}}</p>
                                                        <a href="#" ng-show="app_list.status=='started'" class="link_started">{{app_list.status}}</a>
                                                        <a href="#" ng-show="app_list.status=='stopped'" class="stop">{{app_list.status}}</a>
                                                        <a href="#" ng-show="app_list.status=='Not Deployed'" class="undeploy">{{app_list.status}}</a>

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6 col-xs-12 col-sm-6 text-right">
                                                <div class="group">
                                                    <a target="_blank" href="{{app_list.url}}" ng-show="app_list.url!=''" class="text_url">{{app_list.url}}</a>
                                                </div>
                                                <div class="group">
                                                    <div class="lt">App key :</div>
                                                    <div class="rt">{{app_list.appKey}}</div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div ng-show="collapsed" class="accordion-section-content">
                                            <div class="panel-body">
                                                <div id="alertbox-{{$index+1}}" role="alert"></div>
                                                <div class="col-lg-12 col-xs-12 col-sm-12 text-center action_div">
                                                    <!--<span us-spinner="{radius:10, width:4, length: 15}" spinner-key="spinner-1{{$index}}"></span>-->
                                                    <span><i class="fa fa-list"></i> Select Action :</span> 
                                                    <a href="javascript:void(0)" id="start-{{$index}}" ng-click="start(app_list.appId,$index)" class="start"><i class="fa fa-play fa-lg"></i>Started</a> 
                                                    <a href="javascript:void(0)" id="stop-{{$index}}" ng-click="stop(app_list.appId,$index)" class="stop"><i class="fa fa-stop fa-lg"></i> Stop</a>
                                                    <a href="javascript:void(0)" id="refresh-{{$index}}" ng-click="refresh(app_list.appId,$index)" class="refresh"><i class="fa fa-refresh fa-lg"></i>Refresh</a>
                                                    <a href="javascript:void(0)" id="deploy-{{$index}}" data-toggle="modal" data-target="#app_list-{{$index + 1}}myModal" class="deploy"><i class="fa fa-cloud-upload fa-lg"></i> Deploy</a> 
                                                    <a href="javascript:void(0)" id="undeploy-{{$index}}" ng-click="undeploy(app_list.appId,$index)" class="undeploy"><i class="fa fa-dot-circle-o fa-lg"></i>Undeploy</a>
                                                    <a href="javascript:void(0)" id="delete-{{$index}}" data-toggle="modal" data-target="#app_listDelete-{{$index + 1}}myModal" class="delete"><i class="fa fa-trash-o fa-lg"></i> Delete</a>

                                                </div>
                                                <div class="col-lg-12 col-xs-12">
                                                    {{app_list.desc}}
                                                    <a href="#" class="read_more">Read More</a>
                                                </div>
                                            </div>
                                        </div>


                                </td>
                            </tr>

                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    <div data-pagination="" data-num-pages="numPages()" data-current-page="currentPage" data-max-size="maxSize" data-boundary-links="true"></div>

分页在这里不起作用。任何人都可以帮助我。

0 个答案:

没有答案