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'>×</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 ...
随机推荐
- MultiDex到底有多坑
google为什么要引入MultiDex? dex指令是用16位寄存器来保存dex中的方法数,所以限制了在apk 中最大的方法数为65535,当超过这个最大值在编译的时候会报 方法数超标的错误. 如何 ...
- Java—常用数据类型
1 Vector类 Vector类似于一个数组,但与数组相比在使用上有以下两个优点. (1) 使用的时候无需声明上限,随着元素的增加,Vector的长度会自动增加. (2) Vector提供额外的方 ...
- EverEdit安装
- 转：PHP--获取响应头(Response Header)方法
转:http://blog.sina.com.cn/s/blog_5f54f0be0102uvxu.html PHP--获取响应头(Response Header)方法 方法一: ========== ...
- python语法------时间函数
1.导入函数库: import time 获取格式化的时间 你可以根据需求选取各种格式,但是最简单的获取可读的时间模式的函数是asctime(): #!/usr/bin/python # -*- co ...
- NGINX location 在配置中的优先级
location表达式类型 ~ 表示执行一个正则匹配,区分大小写 ~* 表示执行一个正则匹配,不区分大小写 ^~ 表示普通字符匹配.使用前缀匹配.如果匹配成功,则不再匹配其他location. = 进 ...
- SQLite常用命令
1.点命令 [退出SQLite提示符] .quit .exit [帮助] .help [显示设置] .show 2.语法 [结束符] : --一行语句的结束以分号(:)结尾 [CREATE TABLE ...
- Windows 7中无法访问FTP的解决方法
解决: netsh advfirewall set global StatefulFTP disable
- CPU标志寄存器
这个标志寄存器似乎很重要,不干掉它,中断这玩意还进行不下去了,但是过于复杂,都是一些跟计算结果相关的位,头痛 (这是别人写的一篇非常好的关于标志寄存器的文章http://blog.csdn.net/w ...
- 对hbase的学习
HBase,是Hadoop DataBase. 面向列的分布式数据库, 思想来源于Google的BigTable思想,它的目标是在廉价硬件构成的集群上管理超大规模的稀疏表. Hbase的物理结构 HB ...