指令学习之angular-column-filter的实现

最新推荐文章于 2022-01-14 17:01:08 发布

weixin_34290390

最新推荐文章于 2022-01-14 17:01:08 发布

阅读量244

点赞数

CC 4.0 BY-SA版权

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/lonelydawn/blog/910361

本文介绍了AngularJS中的指令概念及自定义指令的实现方法，并提供了一个实战案例。同时，还详细解析了一个用于表格数据筛选的Angular组件——angular-column-filter的设计与使用。

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

2019独角兽企业重金招聘Python工程师标准>>>

Angular指令简介

AngularJS 通过被称为指令的新属性来扩展 HTML。它内置了63个常用指令，包括ng-model、ng-bind等实现双向数据绑定的指令，也包括ng-click、ng-keyup等优化javascript监听事件的指令。

在企业开发中，常常会反复使用一些领域相关的业务组件。Angular为能够使用户更好地复用封装适合自己的一些组件，允许用户自定义指令。

Angular指令入门教程

Angular对外开放的自定义指令的接口使用起来很简单。这是runoob上的一个简单教程。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>
</html>

运行时，angular默认replace为true，采用模板替换的方法将runoob-directive 标签中的内容替换成template中的内容。

除了replace/transclusion之外，自指令还有以下几个参数:

restrict 声明元素的替换方式

A attribute 作为元素的属性将会被替换
C class 作为元素的类名将会被替换
M comment 作为元素的html格式注释将会被替换
E element 作为元素标签将会被替换

scope 声明元素的独立作用域

如果指令在同一个作用域出现多次，且指令要用到作用域的某一数据data。那么当data因为了适应某一指令需求而发生改变时，所有指令都会被影响。这是我们所不希望的，此时可声明独立作用域。

template 声明元素将被替换为的模板

link 在这里声明指令内部所用到的方法

controller 在这里可声明指令对外暴露的方法

require 声明所要依赖的其他指令

更多详细内容你可以参考:

http://www.angularjs.cn/A02B

angular-column-filter

简单介绍

angular-column-filter是一个专门应用于table数据展示筛选的angular组件。它依赖于angular1.x和jQuery.

使用方法

你可以在我的github中查看他的用法和源代码:

https://github.com/lonelydawn/angular-column-filter

并通过npm安装使用它:

npm install angular-column-filter --save

设计思想

在这里我仅简单说明一下其设计思想:

表格在结构上分为表头和表体。其中，表头 field 是一个一维数组，表体 data 则是一个二维数组，field 的length要和data[i]的length相同，并且field[t]的数据要和data[i][t]的数据对应。而点击表头后要显示的下拉菜单框也是一个一维数组，但因为每一个表头字段都可能产生一个filter，也可能不，因此在数据结构上它既不是一维数组，也不是二维数组。

我这样来架构它:

filter : {
            1: ["全部", "男", "女"],
            6: ["全部", "北京", "上海", "深圳", "广州", "南京", "合肥", "济南", "青岛"]
        },

key 值代表将要被转化为filter的列index。如： field[1] 即代表表头的第二列将会被转化为filter。

value 值代表filter的options，下面是本段代码 field[1]转化成的filter示例图:

初始 filter 的 display 样式值为none，鼠标点击表头显示 filter ，鼠标移出表头隐藏 filter。声明$scope.fieldIndex 变量用来判断表头字段是否有对应的 filter 和标识正在操作的表头字段。

在选中filter的某一项时，

// 最终数组
var result = [];
// 将表体 data 数据复制入最终数组
for (var t = 0; t < scope.tableData.data.length; t++)
    result.push(scope.tableData.data[t]);

/**
* 递归筛选出最终数组
* index 标识列项目
* flgArr[index]标识被选列详细条目的下标
*/
var recursive = function (index) {
  if (index < scope.flgArr.length) {
     if (scope.flgArr[index] > -1) {
        // 获取被筛选项
        var seed = scope.tableData.filter[index][scope.flgArr[index]];
        if(seed != "全部"){
            var tmpArr = [];
            for (var i = 0; i < result.length; i++) {
                if (seed == result[i][index]) {
                    tmpArr.push(result[i]);
                }
            }
            result = tmpArr;
         }
      }
      recursive(++index);
   }
};
recursive(0);
// 将最终数组赋给保存表体显示数据的数组
scope.showData = result;

scope.flgArr[index] 标识被选中的下标，并以此从 filter 中获取被筛选项字符串实体，用以和 data[i] 对应位置的数据进行比较，如果数据相等，则将 data[i] 添加到最终数据以便最后显示。