<html>

   <head>

     <meta charset='utf-8'>

     <script src="js/angular.js"></script>

     <script src="js/app.js"></script>

     <link rel="stylesheet" href="css/bootstrap.css">

   </head>

   <body ng-app="MyApp">

     <div ng-controller="PaginationCtrl">

       <table class="table table-striped">

         <thead>

           <tr>

             <th>Id</th>

             <th>Name</th>

             <th>Description</th>

           </tr>

         </thead>

         <tbody>

           <tr ng-repeat="item in items | offset: currentPage*itemsPerPage | limitTo: itemsPerPage">

             <td>{{item.id}}</td>

             <td>{{item.name}}</td>

             <td>{{item.description}}</td>

           </tr>

         </tbody>

         <tfoot>

           <td colspan="3">

             <div class="pagination">

               <ul>

                 <li ng-class="prevPageDisabled()">

                   <a href ng-click="prevPage()">« Prev</a>

                 </li>

                 <li ng-repeat="n in range()" ng-class="{active: n == currentPage}" ng-click="setPage(n)">

                   <a href="#">{{n+1}}</a>

                 </li>

                 <li ng-class="nextPageDisabled()">

                   <a href ng-click="nextPage()">Next »</a>

                 </li>

               </ul>

             </div>

           </td>

         </tfoot>

       </table>

     </div>

   </body>

 </html>
 var app = angular.module("MyApp", []);

 app.filter('offset', function() {

   return function(input, start) {

     start = parseInt(start, 10);

     return input.slice(start);

   };

 });

 app.controller("PaginationCtrl", function($scope) {

   $scope.itemsPerPage = 5;

   $scope.currentPage = 0;

   $scope.items = [];

   for (var i=0; i<; i++) {

     $scope.items.push({ id: i, name: "name "+ i, description: "description " + i });

   }

   $scope.range = function() {

     var rangeSize = 5;

     var ret = [];

     var start;

     start = $scope.currentPage;

     if ( start > $scope.pageCount()-rangeSize ) {

       start = $scope.pageCount()-rangeSize+1;

     }

     for (var i=start; i<start+rangeSize; i++) {

       ret.push(i);

     }

     return ret;

   };

   $scope.prevPage = function() {

     if ($scope.currentPage > 0) {

       $scope.currentPage--;

     }

   };

   $scope.prevPageDisabled = function() {

     return $scope.currentPage === 0 ? "disabled" : "";

   };

   $scope.pageCount = function() {

     return Math.ceil($scope.items.length/$scope.itemsPerPage)-1;

   };

   $scope.nextPage = function() {

     if ($scope.currentPage < $scope.pageCount()) {

       $scope.currentPage++;

     }

   };

   $scope.nextPageDisabled = function() {

     return $scope.currentPage === $scope.pageCount() ? "disabled" : "";

   };

   $scope.setPage = function(n) {

     $scope.currentPage = n;

   };

 });

简易控制中心，angular的简单使用的更多相关文章

  1. Dubbo简易控制中心安装

    1. zookeeper安装(单机版):http://www.cnblogs.com/wangfajun/p/5251159.html  √ 2. dubbo管控台安装(zookeeper单机版):h ...

  2. 2018年 js 简易控制滚动条滚动的简单方法

    首先是es2015 的新api Element.scrollIntoView() // 滚动到最上方 等同于 dom.scrollIntoView(true) Element.scrollIntoVi ...

  3. 3.2 配置构建Angular应用——简单的笔记存储应用

    本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性.这个应用用到的特性有: 在JSON文件中存储笔记 展示.创建.修改和删除笔记 在笔记中使用M ...

  4. 3.2.1 配置构建Angular应用——简单的笔记存储应用——展示功能

    本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性.这个应用用到的特性有: 在JSON文件中存储笔记 展示.创建.修改和删除笔记 在笔记中使用M ...

  5. Atitit 控制中心快速启动面板quick launcher

    Atitit 控制中心快速启动面板quick launcher contralPanel.bat aaaControlPanel.contrlx /AtiPlatf_auto/src_atibrow/ ...

  6. Heritrix源码分析(十三) Heritrix的控制中心(大脑)CrawlController(二)

    本博客属原创文章,欢迎转载!转载请务必注明出处:http://guoyunsky.iteye.com/blog/650744      本博客已迁移到本人独立博客: http://www.yun5u. ...

  7. 【转】预装Win8/8.1 中文版系统升级为专业版或专业版含媒体中心版的简单方法

    [转]预装Win8/8.1 中文版系统升级为专业版或专业版含媒体中心版的简单方法 原文地址:http://www.iruanmi.com/upgrade-win8-china-to-a-higher- ...

  8. 3.2.1 配置构建Angular应用——简单的笔记存储应用——编辑功能

    本节我们会接着上节课的内容,继续来完成使用Angular来创建简单的笔记存储应用,上一节课,我们完成了笔记的展示功能,本节课,我们来完成编辑功能. 编辑主要是两个功能:编辑现有的笔记以及创建新笔记.首 ...

  9. Angular实现简单数据计算与删除

    AngularJS 1)什么是AngularJS AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. ...

随机推荐

  1. 关闭HTC手机充电时屏幕一直亮着绿色电池的办法

            首先必须取得ROOT权限,用RE文件管理器进system/bin/把最下面的zchgd文件改名字或者直接删掉重新启动手机充电时就不会亮屏了,电池图标也不会出来,再用数据线连电脑充电吧, ...

  2. ural 1353. Milliard Vasya's Function（背包/递归深搜）

    1353. Milliard Vasya's Function Time limit: 1.0 second Memory limit: 64 MB Vasya is the beginning ma ...

  3. 6．编写一个Java应用程序，该应用程序包括2个类：Print类和主类E。Print 类里有一个方法output()功能是输出100 ~ 999之间的所有水仙花数（各位数字的 立方和等于这个三位数本身，如: 371 = 33 + 73 + 13。）在主类E的main方法中来 测试类Print。

    Print类: package com.bao; public class Print { int g,s,b; void outPut() { for(int i=100;i<1000;i++ ...

  4. SQL函数学习（一）：substring()函数

    秒懂例子: substring('98765',-1,3) 结果:9 substring('98765',0,3) 结果:98 substring('98765',1,3) 结果:987 在操作sql ...

  5. UIScrollView 加载多个view view还可以交换顺序（2）

    在上的代码中 UIview都在一个页面 要是每一个view对应一个页面 操作每一个view代码都在viewcontroller里面就会很乱,那么我们就将view重新做一下 创建想要的页面继承与view ...

  6. boost.spirit之解析C++头文件

    环境:win7_64旗舰版,VS2008 场景:C++与lua交互是比较繁琐的,当我们编写一个C++类后,如果要给lua使用,就必须写一个lua包装类,将lua与原始C++类关联起来.其实这部分代码编 ...

  7. 委托的BeginInvoke和EndInvoke方法

    .NET Framework 允许异步调用任何方法,为了实现异步调用目标,需要定义与被调用方法具有相同签名的委托.公共语言运行时会自动使用适当的签名为该委托定义 BeginInvoke 和 EndIn ...

  8. PHP signal 信号

    最早写php时,发现在终端执行一个php文件,会一直等待程序执行完成以后,终端才能继续下面的操作,若不小心按了下Ctrl+C会导致php程序退出,闭避免这种情况发生,将会使用php的系统编程,即sig ...

  9. 【超级干货】手机移动端WEB资源整合：转载

    转载于:http://www.w3cfuns.com/notes/24611/fbba9cbd616e795360ea45515494aa53.html meta基础知识 H5页面窗口自动调整到设备宽 ...

  10. [nginx] 网上最全面nginx教程（近100篇文章整理）

    转载:http://bbs.linuxtone.org/thread-25588-1-1.html Nginx基础 1.  nginx安装 2.  nginx 编译参数详解 3.  nginx安装配置 ...