简易控制中心，angular的简单使用
<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的简单使用的更多相关文章
- Dubbo简易控制中心安装
1. zookeeper安装(单机版):http://www.cnblogs.com/wangfajun/p/5251159.html √ 2. dubbo管控台安装(zookeeper单机版):h ...
- 2018年 js 简易控制滚动条滚动的简单方法
首先是es2015 的新api Element.scrollIntoView() // 滚动到最上方 等同于 dom.scrollIntoView(true) Element.scrollIntoVi ...
- 3.2 配置构建Angular应用——简单的笔记存储应用
本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性.这个应用用到的特性有: 在JSON文件中存储笔记 展示.创建.修改和删除笔记 在笔记中使用M ...
- 3.2.1 配置构建Angular应用——简单的笔记存储应用——展示功能
本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性.这个应用用到的特性有: 在JSON文件中存储笔记 展示.创建.修改和删除笔记 在笔记中使用M ...
- Atitit 控制中心快速启动面板quick launcher
Atitit 控制中心快速启动面板quick launcher contralPanel.bat aaaControlPanel.contrlx /AtiPlatf_auto/src_atibrow/ ...
- Heritrix源码分析(十三) Heritrix的控制中心(大脑)CrawlController(二)
本博客属原创文章,欢迎转载!转载请务必注明出处:http://guoyunsky.iteye.com/blog/650744 本博客已迁移到本人独立博客: http://www.yun5u. ...
- 【转】预装Win8/8.1 中文版系统升级为专业版或专业版含媒体中心版的简单方法
[转]预装Win8/8.1 中文版系统升级为专业版或专业版含媒体中心版的简单方法 原文地址:http://www.iruanmi.com/upgrade-win8-china-to-a-higher- ...
- 3.2.1 配置构建Angular应用——简单的笔记存储应用——编辑功能
本节我们会接着上节课的内容,继续来完成使用Angular来创建简单的笔记存储应用,上一节课,我们完成了笔记的展示功能,本节课,我们来完成编辑功能. 编辑主要是两个功能:编辑现有的笔记以及创建新笔记.首 ...
- Angular实现简单数据计算与删除
AngularJS 1)什么是AngularJS AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. ...
随机推荐
- 文件断点续传原理与实现—— ESFramework 通信框架4.0 进阶（12）
在ESFramework通信框架 4.0 快速上手(13) -- 文件传送,如此简单一文的详细介绍和ESFramework通信框架 4.0 快速上手(14) -- 聊天系统Demo,增加文件传送功能( ...
- TortoiseGit - Win7使用Gitblit搭建Git服务器教程
第一步:下载Java并且安装 第二步:配置Java环境变量环境变量 --> 系统变量1新建:变量名:JAVA_HOME变量值:D:\Program Files (x86)\Java\jdk1.6 ...
- CEdit实现文本换行
CEdit控件若要在字符串中插入换行字符("\r\n")实现换行效果,必须指定两个风格 ES_MULTILINE和ES_WANTRETURN. 1: DWORD dwStyle = ...
- 解决XCode插件在XCode6.4上失效的办法
Xcode 6.4 解决 插件失效的方法 查看 插件目录: ~/Library/Application Support/Developer/Shared/Xcode/Plug-ins/ 邮件打开插件 ...
- iOS动画编程
IOS中的动画总结来说有五种:UIView<block>,CAAnimation<CABasicAnimation,CATransition,CAKeyframeAnimation& ...
- HTTPS科普扫盲帖【转】
为什么需要https HTTP是明文传输的,也就意味着,介于发送端.接收端中间的任意节点都可以知道你们传输的内容是什么.这些节点可能是路由器.代理等. 举个最常见的例子,用户登陆.用户输入账号,密码, ...
- php 好用的函数
extract — 从数组中将变量导入到当前的符号表,数组的键将作为新的变量,数组的值将最为新变量的值
- myBatIs.Net 调用Oracle 存储过程返回游标
找了好久,网上也没示例,全是java的,没办法,后来看到一个网上别人写的例子. http://www.myfirm.cn/blog/article/Control/13.html 上面照套还是出错,我 ...
- Python - 字母算术谜题
如: SEND + MORE == MONEY 9567 + 1085 == 10652 字母和数字一一对应 首字母不为0 解法: import re from itertools import ...
- DOM操作-主动触发按钮的单击事件
代码: ———————————————————————————————— <script> function fireBtnClick(){ var myBtn ...