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

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窗体*/
     });

angular+bootstrap+MVC 之三，分页控件初级版的更多相关文章

  1. 基于KO+bootstrap+MVC的分页控件

    JS: /// <reference path="../knockout-3.2.0.js" /> var ViewModel = function (data) { ...

  2. 基于存储过程的MVC开源分页控件--LYB.NET.SPPager

    摘要 现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件MVCPager(http://www.webdiyer.com/)算 ...

  3. 一个Bootstrap风格的分页控件

      http://www.cnblogs.com/wangwei123/p/3682626.html 主题 jQueryBootstrap 一个Bootstrap风格的分页控件,对于喜欢Bootstr ...

  4. 基于存储过程的MVC开源分页控件

    基于存储过程的MVC开源分页控件--LYB.NET.SPPager 摘要 现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件M ...

  5. Mvc自定义分页控件

    MVC开发分页常常使用第三方控件,生成的分页HTML带有版权申明,虽然免费,但是总有的别扭.于是,某日,楼主闲来蛋疼,折腾了个自定义分页控件: 先来展示下效果图: 1>当分页不超过10页的时候, ...

  6. Net MVC轻量级分页控件

    JPager.Net MVC超好用轻量级分页控件   JPager.Net  MVC好用的轻量级分页控件,好用到你无法想象,轻量到你无法想象. JPager.Net  MVC好用的轻量级分页控件,实现 ...

  7. MVC Page分页控件

    MVCPage帮助类 控制器代码 public ActionResult Article(int? page) { //Session["ArticleClass"] = cont ...

  8. 使用 Vue.js 结合bootstrap 实现的分页控件

    原文链接:http://blog.csdn.net/qiuhaotc/article/details/53031884 源码下载: http://pan.baidu.com/s/1i4XgH6H 密码 ...

  9. MvcPager分页控件以适用Bootstrap

    随笔- 9  文章- 0  评论- 33  修改MvcPager分页控件以适用Bootstrap 效果(含英文版,可下载)   软件开发分页效果必不可少,对于Asp.Net MVC 而言,MvcPag ...

随机推荐

  1. Eclipse 的 Debug 介绍与技巧

    转载: Eclipse 的 Debug 介绍与技巧

  2. Android Gradle的使用

    说明: 在Android Studio中的Terminal可以直接使用Gradle命令行,不需要配置环境,而想直接在电脑的命令行使用Gradle命令行, 则需要配置环境,Window下配置Gradle ...

  3. Samba Linux 和windows 共享

    1.安装Samba  (yum install Samba) 2.配置Samba  (Samba的配置文件为/etc/samba/smb.conf) 1)打开smb.conf   vim /etc/s ...

  4. HTML“计算机输出”标签 <code><kbd><samp><tt><var><pre>

    我们并不反对使用它们,但是如果您只是为了达到某种视觉效果而使用这些标签的话,我们建议您使用样式表,那么做会达到更加丰富的效果. <code> 标签-定义计算机代码文本. 定义和用法: &l ...

  5. .htaccess简介和详解

    .htaccess文件(或者”分布式配置文件”)提供了针对目录改变配置的方法, 即,在一个特定的文档目录中放置一个包含一个或多个指令的文件, 以作用于此目录及其所有子目录.作为用户,所能使用的命令受到 ...

  6. NSRunLoop概述和原理

    1.什么是NSRunLoop?我们会经常看到这样的代码: - (IBAction)start:(id)sender{pageStillLoading = YES;[NSThread detachNew ...

  7. Charles的使用

    简介 Charles是在Mac下常用的截取网络封包的工具,在做iOS开发时,我们为了调试与服务器端的网络通讯协议,常常需要截取网络封包来分析.Charles通过将自己设置成系统的网络访问代理服务器,使 ...

  8. C语言基础--二维数组

    二维数组概念: 数组中的每一个元素又是一个数组, 那么这个数组就称之为二维数组,二维数组是特殊的一维数组. 二维数组格式: 元素类型 数组名称[一维数组的个数][每个一维数组的元素个数]; 元素类型 ...

  9. [安卓]windows下如何安装Android源码

    本文改写于:http://www.cnblogs.com/skyme/archive/2011/05/14/2046040.html 1.下载并安装git: 在git-scm.com上下载并安装git ...

  10. HDU 2276

    http://acm.hdu.edu.cn/showproblem.php?pid=2276 矩阵乘法可以解决的一类灯泡开关问题 /* 转移关系为 now left now* 1 0 1 1 1 0 ...