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 ...
随机推荐
- EaseType缓动函数
http://sol.gfxile.net/interpolation/ 一篇很详细的图文
- ModalPopup
原文地址:http://ajax.asp.net/ajaxtoolkit/ModalPopup/ModalPopup.aspx ModalPopup 描述 ModalPopup 能够使页面以设计对话框 ...
- chrome浏览器遇到的异常
昨天写了一个二进制输出图片的方法,发现在chrome浏览器里面出了异常: (failed) net::ERR_INCOMPLETE_CHUNKED_ENCODING 代码是这样写的: //直接输出 ...
- ssh下：系统初始化实现ServletContextListener接口时，获取spring中数据层对象无效的问题
想要实现的功能:SSH环境下,数据层都交由Spring管理:在服务启动时,将数据库中的一些数据加载到ServletContext中缓存起来. 系统初始化类需要实现两个接口: ServletContex ...
- 美女程序员是如何将QQ转换成题目中那串数字的--读博文《找女神要QQ号码》
我只能说好好的端午节你们不约么?,还在这里写代码?我也是够无聊的,下班了不走也在这跟风写着玩!<找女生要QQ号码原文>原文链接http://www.cnblogs.com/iforever ...
- mssqlserver 分日志（日志文件过大）
ALTER DATABASE HexStudyDB3Reader SET RECOVERY SIMPLE WITH NO_WAIT ALTER DATABASE HexStudyDB3Reader S ...
- HTTP 错误 500.23 - Internal Server Error 解决方法
分析原因:在安装完成后IIS已经支持ASP和ASP.NET 2.0,需要注意的是.NET站点的应用程序池应选用Classic .NET AppPool,而不能用默认的DefaultAppPool,否则 ...
- Linux Shell Demo
#!/bin/sh for p in ./* do if test -d $p then touch $p".ok" if test -f $p"/busi.xml&qu ...
- NuSOAP与PHPRPC比较（转）
因为看到有人问 Nusoap 和 PHPRPC 的比较,为了让大家能够更清楚地了解 Nusoap 和 PHPRPC 的关系,所以在这里做一个简要的说明性介绍,所写的内容也不是面面俱到的,只写了一些主要 ...
- asp.net生成缩略图
/// <summary> /// 生成缩略图 /// </summary> /// <param name="orginalImagePat"> ...