<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. Excel教程(6) - 外部函数

    EUROCONVERT 用途:将数字转换为欧元形式,将数字由欧元形式转换为 欧盟成员国货币形式,或利用欧元作为中间货币将数字由某一 欧盟成员国货币转化为另一欧盟成员国货币的形式(三角转换 关系). 语 ...

  2. TortoiseGit - pull request

    有一个仓库,叫Repo A.你如果要往里贡献代码,首先要Fork这个Repo,于是在你的Github账号下有了一个Repo A2,.然后你在这个A2下工作,Commit,push等.然后你希望原始仓库 ...

  3. 洛谷-哥德巴赫猜想（升级版）-BOSS战-入门综合练习1

    题目背景 Background 1742年6月7日哥德巴赫写信给当时的大数学家欧拉,正式提出了以下的猜想:任何一个大于9的奇数都可以表示成3个质数之和.质数是指除了1和本身之外没有其他约数的数,如2和 ...

  4. iOS 加载本地的html文件

    方法1: self.webView  = [[UIWebView alloc]initWithFrame:self.view.bounds]; NSString *path = [[NSBundle ...

  5. Silverlight程序中访问配置文件

    以下代码为本人在一Silverlight程序中访问Web端配置文件的代码: private void GetLoadNeed() { // 项目名称读取配置文件 WebClient wcConfigX ...

  6. Sql Sever语句 （续2）

    日期时间 把日期类型的字段下默认值或绑定里的 设置成getdate()   ,新建字段时候不设置会自动获取当前服务器时间 在当前时间加上xx年xx月xx天 select datedd(yy,100,g ...

  7. Position & anchorPoint 深入

    引言 相信初接触到CALayer的人都会遇到以下几个问题: 为什么修改anchorPoint会移动layer的位置?CALayer的position点是哪一点呢?anchorPoint与positio ...

  8. HDU 5795 A Simple Nim

    打表找SG函数规律. #pragma comment(linker, "/STACK:1024000000,1024000000") #include<cstdio> ...

  9. HDU 3338 Kakuro Extension

    网络最大流 TLE了两天的题目.80次Submit才AC,发现是刘汝佳白书的Dinic代码还可以优化.....瞬间无语..... #include<cstdio> #include< ...

  10. 《Windows驱动开发技术详解》之自定义StartIO

    自定义StartIO 系统定义的StartIO队列只能使用一个队列(DDK提供的StartIO内部只有一个队列),这个队列将所有的IRP进行处理化.例如,读.写操作都会混在一起进行串行处理.然而,有时 ...