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

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

基于KO+bootstrap+MVC的分页控件
JS: /// <reference path="../knockout-3.2.0.js" /> var ViewModel = function (data) { ...
基于存储过程的MVC开源分页控件--LYB.NET.SPPager
摘要现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件MVCPager(http://www.webdiyer.com/)算 ...
一个Bootstrap风格的分页控件
http://www.cnblogs.com/wangwei123/p/3682626.html 主题 jQueryBootstrap 一个Bootstrap风格的分页控件,对于喜欢Bootstr ...
基于存储过程的MVC开源分页控件
基于存储过程的MVC开源分页控件--LYB.NET.SPPager 摘要现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件M ...
Mvc自定义分页控件
MVC开发分页常常使用第三方控件,生成的分页HTML带有版权申明,虽然免费,但是总有的别扭.于是,某日,楼主闲来蛋疼,折腾了个自定义分页控件: 先来展示下效果图: 1>当分页不超过10页的时候, ...
Net MVC轻量级分页控件
JPager.Net MVC超好用轻量级分页控件 JPager.Net MVC好用的轻量级分页控件,好用到你无法想象,轻量到你无法想象. JPager.Net MVC好用的轻量级分页控件,实现 ...
MVC Page分页控件
MVCPage帮助类控制器代码 public ActionResult Article(int? page) { //Session["ArticleClass"] = cont ...
使用 Vue.js 结合bootstrap 实现的分页控件
原文链接:http://blog.csdn.net/qiuhaotc/article/details/53031884 源码下载: http://pan.baidu.com/s/1i4XgH6H 密码 ...
MvcPager分页控件以适用Bootstrap
随笔- 9 文章- 0 评论- 33 修改MvcPager分页控件以适用Bootstrap 效果(含英文版,可下载) 软件开发分页效果必不可少,对于Asp.Net MVC 而言,MvcPag ...

随机推荐

Technology Remarks
-----------------------分隔符-----12.10.2016------ 抓视频关键字补充: Base64编码/解码出现这样的情况怎么办呢? 网址: abook-hep ...
详解应对平台高并发的分布式调度框架TBSchedule
转载: 详解应对平台高并发的分布式调度框架TBSchedule
并发编程 13—— 线程池的使用之配置ThreadPoolExecutor 和饱和策略
Java并发编程实践目录并发编程 01—— ThreadLocal 并发编程 02—— ConcurrentHashMap 并发编程 03—— 阻塞队列和生产者-消费者模式并发编程 04—— 闭 ...
java.util.logging.Logger 使用详解
概述: 第1部分创建Logger对象第2部分日志级别第3部分 Handler 第4部分 Formatter 第5部分自定义第6部分 Logger的层次关系参考第1部分创建Logger ...
PDF解析
解析如下图PDF文件 using System; using System.Collections.Generic; using System.Linq; using System.Text; usi ...
iOS开发多线程篇—创建线程
iOS开发多线程篇—创建线程一.创建和启动线程简单说明一个NSThread对象就代表一条线程创建.启动线程 (1) NSThread *thread = [[NSThread alloc] in ...
android布局学习之相对布局（RelativeLayout）
移通152余继彪 RelativeLayout可以设置某一个视图相对于其他视图的位置,这些位置可以包括上下左右等 RelativeLayout 属性说明 android:layout_bel ...
spring-mvc xml文件的最基本配置
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...
iOS流量精灵完结版
从一开始的激动,到现在的三期完结持续了将近三个半月时间,心态也开始变的坦然. 开发期间没有兑现自己的若言,没有写下所有的感悟和困难.我没有借口可言,唯一能说的只能说自己太懒....哈哈总体来说流量监 ...
<Java中的继承和组合之间的联系和区别>
//Java中的继承和组合之间的联系和区别 //本例是继承 class Animal { private void beat() { System.out.println("心胀跳动...& ...

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

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

随机推荐

热门专题