《AngularJS高级程序设计》之分页实现

学习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中,是这样加的过滤器

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值