angular.module('customFilter',[])
.filter('customFilter', function () {
return function (data,propertyName) {
if(angular.isArray(data)&&angular.isString(propertyName)){
var result = [];
var key={};
for (var i = 0; i < data.length; i++) {
var obj = data[i][propertyName];
if(angular.isUnderfined(key[obj])){
key[obj]=true;
result.push(obj);}
}
return result;
}
}
})
这里是创建了一个新模块,’customFilter’,过滤器名称为’customFilter’,返回一个工人函数,接收的参数是对象数组的一个对象和对象的类名。循环遍历得到对象数组的每一个类名属性值,放入result数组中。 这里让人佩服一点是,作者想到了建立一个对象,然后将属性作为key,属性值设为true。保证了属性值的唯一性。 在视图部分是这样写的: 左边视图就可以完全展示出来了。但是还需要在左边加了单击事件的方法。 ![这里写图片描述](https://img-blog.csdn.net/20161025161508818) 下一个效果,点击左边分类HOME时,显示首页,分别点击每一个分类时,显示相关的分类信息。。。。
视图层:使用Angular内置的过滤器filter,处理集合并选择包含的对象子集。
再下一个:点击哪个按钮需要一个视觉反馈吧,如下图所示
在html文件上使用ng-class指令ng-class=”getCaClass(item)”,在控制器上写入以下代码
angular.module(‘sportshop’)
.constant(“activaClass”,”btn-primary”)
.controller(‘productCtrl’, function (
scope,
filter,activaClass) {
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) {
return selectedCatory == newCatory? activaClass:”;
}
});
值得学习的一点是,作者不想在行为代码中嵌入类名,使用Module对象的constant方法定义了定值activaClass(在点击Home时,newCatory为null,与selectedCatory相等,也可实现效果)
下一篇写:2如何实现分页?看看大牛作者是何种思路?