AngularJS入门笔记-8-购物网站产品列表Demo
延续上次学习的静态demo,本次做一个简单的实现分页,可分类展示产品的购物小demo
产品列表界面效果如下图:
目录组织结构:
1 | angularjs #项目目录 |
静态html文件app.html
1 |
|
全局模块-公用控制器 sportsStore.js
1 | /// <reference path="../angular.js" /> |
仅仅只用于展示产品的控制器productListController.js
之所以不在sportsStoreCtrl控制器中是由于考虑到还有其他模块及其对应的控制器,所以将产品列表的控制器独立出来1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36/// <reference path="../angular.js" />
angular.module("sportsStore") // 此处仅是获取sportsStore模块(已在其他文件中初始化了)
.constant("productListActiveClass", "btn-primary") // 此处定义常量productListActiveClass,表示选中项的class名称
.constant("productListPageCount", 3) // 此处定义常量productListPageCount,表示分页时每页产品的数量
.controller("productListCtrl", function ($scope, $filter, // 定义产品列表控制器,在函数参数中先指定依赖的模块或服务或常量
productListActiveClass, productListPageCount) {
var selectedCategory = null; // 表示当前所选择的产品类别
$scope.selectedPage = 1; // 表示当前所在页数
$scope.pageSize = productListPageCount; // 表示每页产品数量
// 视图上绑定分类列表项函数
$scope.selectCategory = function (newCategory) {
selectedCategory = newCategory;
$scope.selectedPage = 1;
}
// 选定页数的函数
$scope.selectPage = function (newPage) {
$scope.selectedPage = newPage;
}
// 过滤分类
$scope.categoryFilterFn = function (product) {
return selectedCategory == null ||
product.category == selectedCategory;
}
// 确定分类的class
$scope.getCategoryClass = function (category) {
return selectedCategory == category ? productListActiveClass : "";
}
// 确定当前页的class
$scope.getPageClass = function (page) {
return $scope.selectedPage == page ? productListActiveClass : "";
}
});
#在该文件中定义所有的过滤器customFilters.js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49/// <reference path="../angular.js" />
angular.module("customFilters", []) // 定义customFilters模块,作为过滤器集合
.filter("unique", function () { // 返回data中所有唯一的propertyName属性数组
return function (data, propertyName) {
if (angular.isArray(data) && angular.isString(propertyName)) {
var results = [];
var keys = {};
for (var i = 0; i < data.length; i++) {
var val = data[i][propertyName];
if (angular.isUndefined(keys[val])) {
keys[val] = true;
results.push(val);
}
}
return results;
} else {
return data;
}
}
})
.filter("range", function ($filter) { // 获取指定区间的索引数目,以数组形式返回
return function (data, page, size) {
if (angular.isArray(data) && angular.isNumber(page) && angular.isNumber(size)) {
var start_index = (page - 1) * size; // 获取本页面开始的产品索引数
if (data.length < start_index) {
return [];
} else {
// $filter("limitTo")(input, size)方法,选取input数组中的前size个记录,
return $filter("limitTo")(data.splice(start_index), size);
}
} else {
return data;
}
}
})
.filter("pageCount", function () { // 根据data和size,计算页面总数
return function (data, size) {
if (angular.isArray(data)) {
var result = [];
for (var i = 0; i < Math.ceil(data.length / size) ; i++) {
result.push(i);
}
return result;
} else {
return data;
}
}
});