学习AngularJS框架,读了一本书,名字是《AngularJS高级程序设计》,讲的很仔细,解决了不少之前的疑问。以下是实例分析。
主要学习思考以下方法:2如何实现分页
考虑:数据量很大时需要分页,分页首先考虑下:修改控制器追踪分页状态,还有过滤出器如何实现的?
控制器核心思想解释:
angular.module(‘sportshop’)
.constant(“activaClass”,”btn-primary”)
.constant(“PageCount”,3)
.controller(‘productCtrl’, function (
scope,
filter,activaClass,PageCount) {
var selectedCatory = null;
scope.selectC=function(newCatory)selectedCatory=newCatory;$scope.selectPage=1;;
scope.selectFn = function (product) {
return selectedCatory==null || product.category == selectedCatory;
}
scope.getCaClass=function(newCatory)returnselectedCatory==newCatory?activaClass:”;//分页效果
scope.selectPage = 1;
scope.PageCount=PageCount;//因为在html视图中需要用到,所以引入到此作用域中
scope.selectPages = function (newPage) {
scope.selectPage = newPage;
}scope.getPageClass = function (page) {
return scope.selectPage == page? activaClass:”;
}scope.getPageClass = function (page) {
return scope.selectPage == page? activaClass:”;
}
我们定义了一个常量是PageCount,表示分页有3个产品。同时,定义一个参数.selectPage,而且在点击左侧菜单是,分页始终显示为1。scope.selectPages和$scope.getPageClass两个方法都是要定义在分页模块上面的。一个是找到分类页面对应的产品一个是分页时颜色标识的功能。
在HTML中,是这样加的过滤器
《AngularJS高级程序设计》之分页实现
最新推荐文章于 2024-05-09 09:55:34 发布