angular+bootstrap+MVC 之三，分页控件初级版

今天实现一个分页控件，效果如下：

1、HTML：

 <!doctype html>
 <!--suppress ALL -->
 <html ng-app="appTow">
 <head>
     <meta http-equiv="content-type" content="text/html;charset=utf-8">
     <meta content="always" name="referrer">
     <script src="angular.min.js"></script>
     <script src="./Script/jquery-2.1.1.min.js"></script>
     <link href="./Content/Plus/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet"/>
     <script src="./Content/Plus/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
     <link href="./Skin/Default/css/site.css" rel="stylesheet"/>
     <script src="app.js"></script>
 </head>
 <body>
 <div ng-controller="MyController">
     Your name:
     <input type="text" ng-model="username">
     <button ng-click='sayHello()'>greet</button>
     <hr>
     {{greeting}}
 </div>
 <div ng-controller="MyController1">
     Your name:
     <input type="text" ng-model="username">
     <button ng-click='sayHello()'>greet</button>
     <li ng-repeat="x in names" ng-click="clickOneLi(x.Name,$index)">
         {{ x.Name}}
     </li>
     <table>
         <tr>
             <td class="ruyeeTableTDLable"><span>Names</span></td>
             <td class="ruyeeTableDataCell">
                 <div class="btn-group">
                     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                             aria-expanded="false">
                         <span>{{selectedItem}}</span><span class="caret"></span>
                     </button>
                     <ul class="dropdown-menu" role="menu">
                         <li ng-repeat="x in names">
                             <a href="#" ng-click="clickOneLi(x.Name,$index)">{{ x.Name}}</a>
                         </li>
                     </ul>
                 </div>
             </td>
         </tr>
     </table>

     <button ng-click='modal_showModal()'>showModal</button>
     <div class='modal fade'
          tabindex='-1'
          role='dialog'
          aria-labelledby='myModalLabel'
          aria-hidden='true'
          id="myModal">
         <div class='modal-dialog'>
             <div class='modal-content'>
                 <div class='modal-header'>
                     <button type='button' class='close' data-dismiss='modal'>
                         <span aria-hidden='true'>&times;</span>
                         <span class='sr-only'>关闭</span></button>
                     <h4 class='modal-title' id='myModalLabel'>
                         <span>系统提示</span>
                     </h4>
                 </div>
                 <div class='modal-body'>
                     <span>{{modal_selectedId}}:{{selectedItem}}</span>
                 </div>
                 <div class='modal-footer'>
                     <button type='button' data-dismiss='modal' class='btn btn-primary'>
                         取消
                     </button>
                     <button type='button' data-dismiss='modal' class='btn btn-primary'
                             ng-click='modal_okAction(modal_selectedId)'>
                         确定
                     </button>
                 </div>
             </div>
         </div>
     </div>
     <div class="row">
         <div class="btn-toolbar" role="toolbar">
             <div class="btn-group">
                 <input class="btn btn-success pageBtn" type="button" value="<" ng-click="perPageClick()"/>
             </div>
             <div class="btn-group">
                 <input "/>
             </div>
             <div class="btn-group">
                 <button ng-repeat="x in btns" class="btn btn-success pageBtn" type="button"
                         ng-click="$parent.btnClick(x.data)">
                     {{x.data}}
                 </button>

             </div>
             <div class="btn-group">
                 <button class="btn btn-success pageBtn" type="button" ng-click="lastPageClick()">
                     {{pageTotal}}
                 </button>
             </div>
             <div class="btn-group">
                 <input class="btn btn-success pageBtn" type="button" value=">" ng-click="nextPageClick()"/>
             </div>
             <div class="btn-group">
                 <span class="badge">{{totalCount}}</span>
             </div>
         </div>

     </div>
 </div>
 </div>
 </body>
 </html>

2、JS：

 // modal窗体封装
 function modalWindow(angularObj, modalId, okAction) {
     angularObj.modal_selectedId = "-1";
     angularObj.modal_showModal = function () {
         $('#' + modalId).modal();
     }
     angularObj.modal_okAction = function (item) {
         if (typeof okAction == 'function')
             okAction(item);
     }
 }

 function pagedButtons(self) {

     self.totalCount = 100;
     self.perCount = 10;
     self.pageIndex = 1;
     self.btns = [{"data":"1"},{"data":"2"},{"data":"3"}];
     self.pageTotal=10;
     self.getData=function(wantIndex)
     {
         console.log("wantIndex>>"+wantIndex)
     }
     self.btnClick=function(item){
         self.getData(item);
     }

     self.perPageClick = function () {
         var wantIndex = self.pageIndex - 1;
         if (wantIndex <= 0) return;
         self.getData(wantIndex);
     }
     self.nextPageClick = function () {
         var wantIndex = self.pageIndex + 1;
         if (wantIndex - 1 > (self.totalCount / self.perCount)) return;
         self.getData(wantIndex);
     }
     self.firstPageClick = function () {
         self.getData(1);
     }
     self.lastPageClick = function () {
         self.getData(self.pageTotal);
     }

 }
 angular.module('appOne', [])
     .controller('MyController',
     function ($scope) {
         $scope.username = 'World';
         $scope.sayHello = function () {
             $scope.greeting = 'Hello ' + $scope.username + '!';
         };
     });
 angular.module('appTow', ['appOne'])
     .controller('MyController1',
     function ($scope, $http) {
         $scope.username = 'World002';
         $scope.sayHello = function () {
             $http.get("Data.json")
                 .success(function (response) {
                     $scope.names = response;
                 });
         };
         $scope.clickOneLi = function (item, index) {
             $scope.selectedItem = item;

             $scope.modal_selectedId = index;
             $('#myModal').modal();

         }
         $scope.selectedItem = "Please select one";
         /*region modal窗体*/
         /*
          // modal窗体简单实现
          $scope.modal_selectedId="-1";
          $scope.modal_showModal=function(){
          $('#myModal').modal();
          }
          $scope.modal_okAction=function(id)
          {
          alert(id);
          }
          */
         $scope.cc="cc";
         pagedButtons($scope);
         modalWindow($scope, 'myModal', function (_) {
             alert(_);
         })

         /*endregion modal窗体*/
     });