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

来源:互联网 发布:手机淘宝店标怎么设置 编辑:程序博客网 时间:2024/05/16 06:42

学习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;//htmlscope.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