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

最新推荐文章于 2024-10-28 16:37:55 发布

原创最新推荐文章于 2024-10-28 16:37:55 发布 · 936 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs

angularJS 专栏收录该内容

2 篇文章

订阅专栏

本文通过《AngularJS高级程序设计》一书介绍如何利用AngularJS实现动态分类功能，详细解析了使用自定义过滤器生成唯一分类列表的过程，并探讨了如何通过控制器实现分类选择与视觉反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习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.youkuaiyun.com/20161025161508818) 下一个效果，点击左边分类HOME时，显示首页，分别点击每一个分类时，显示相关的分类信息。。。。

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如何实现分页？看看大牛作者是何种思路？