《AngularJS高级程序设计》之一:动态分类

学习AngularJS框架,读了一本书,名字是《AngularJS高级程序设计》,讲的很仔细,解决了不少之前的疑问。以下是实例分析。 主要学习思考以下方法:1如何实现动态分类 考虑:左边一列要表示出分类列表,右边一列是分类详情。以下是给出对象数组。 $scope.data={products:[{name:’product1’,description:’A’,category:’cat1’,price:’100’}, {name:’product2’,description:’B’,category:’cat2’,price:’200’}, {name:’product3’,description:’C’,category:’cat3’,price:’300’}, {name:’product4’,description:’D’,category:’cat4’,price:’400’}]} 核心思想:使用过滤器根据产品的对象数组生成唯一的分类名列表
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如何实现分页?看看大牛作者是何种思路?

已标记关键词 清除标记
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页