如何用angularFilter.js实现长尾词的过滤功能？

本文共计1896个文字，预计阅读时间需要8分钟。

Angular中的自定义过滤器使用：

在Angular项目的实际开发中，Angular内置的过滤器功能强大但功能有限。因此，我们常常根据需求自定义过滤器。以下是我项目中使用的一个自定义过滤器。

angular中的自定义过滤器使用

/** *在angular项目的实际开发中，angular内置的过滤器虽然强大但是很单一 *因此我们常常根据自己的需要自定义了一些过滤器， *下面是我在项目中使用的自定义过滤器，希望能够给予大家帮助 */ /** *angular中的内置过滤器 *常用：currency(货币)、date(日期)、limitTo(限制个数)、number(数字)、orderBy(排序); *了解：lowercase(小写)、uppercase(大写)、filter(子串匹配)、json(格式化json对象); */ /** *过滤器的使用方法： *1.在模板中使用filter(推荐使用，便于优化) **我们可以直接在{{}}中使用filter，跟在表达式后面用 | 分割，语法如下： **{{ expression | filter }} **也可以多个filter连用，上一个filter的输出将作为下一个filter的输入（怪不得这货长的跟管道一个样。。） **{{ expression | filter1 | filter2 | ... }} **filter可以接收参数，参数用 : 进行分割，如下： **{{ expression | filter:argument1:argument2:... }} **除了对{{}}中的数据进行格式化，我们还可以在指令中使用filter，例如先对数组array进行过滤处理，然后再循环输出： ** *2. 在controller和service中使用filter（不推荐使用） **方式就是我们熟悉的依赖注入，只需将它注入到该controller中即可 **app.controller('testC',function($scope,currencyFilter){ ** $scope.num = currencyFilter(123534); **} **在模板中使用{{num}}就可以直接输出 $123,534.00了 **angular提供了一个$filter服务可以来调用所需的filter，你只需注入一个$filter就可以使用多个filter，使用方法如下 **app.controller('testC',function($scope,$filter){ ** $scope.num = $filter('currency')(123534,[123]); 通过,分割来传递多个参数 　 ** $scope.date = $filter('date')(new Date()); **} */ /** *1.自定义超出内容用自定义文本显示，如果传文本用省略号显示 *@param place 超出内容限制（数量） *@param txt 代替超出部分的文本内容 *运用场景：在有限空间的元素中显示文本超出部分使用自定义文本显示 *过滤器例子：如果字符串超过5个超出部分用鸿基梦代替 *调用方法：{{gift.name | omit:5:'鸿基梦'}} */ app.filter('omit', function () { return function (name,place,txt) { if(!place&&!txt){ //如果没有传参则默认字符长度为4且文本为省略号 //转换成字符串的原因是排除number程序不能进行 return String(name).substring(0,4).concat('...') }else{ if(String(name).length>place){ //判断是否存在自定义文本 if(txt){ return String(name).substring(0,place).concat(txt) }else{ return String(name).substring(0,place).concat('...') } }else{ return String(name) } } } }); /** *2.过滤出集合中满足某种条件的元素 *@param datas 需要过滤的集合 *@param key 需要满足条件的key值 *@param val 需要满足条件的val值 *运用场景：tab切换需要获取特定条件的元素 *过滤器例子：过滤出集合langs中type = 1的所有元素（并显示其name值） *调用方法：

{{lang.name}}

*/ app.filter('satisfyData', function () { //datas 需要过滤的集合 //key 需要满足条件的key值 //val 需要满足条件的val值 return function (datas,key,val) { var out = []; angular.forEach(datas, function (data) { if (data[key] === val) { out.push(data); } }); return out; } }); /** *注意：在动态获取对象的key值时可能会遇到下面的坑！！！ **var obj = {"name1":"张三","name2":"李四"}; **var key = "name1"; **var value = obj.key;//得到了"undefined" **value = obj.name1;//得到了"张三" *针对上面的问题总结出如下操作 **js中想根据动态key得到某对象中相对应的value的方法： **1.var key = "name1";var value = obj[key]; （推荐使用） **2.var key = "name1";var value = eval("obj."+key); */ /** *3.定义数字的显示单位和显示位置 *@param data 需要过滤的内容 *@param unit 单位名称（默认显示￥） *@param place 单位显示的位置(true：单位显示在数字前（默认），false：单位显示在数字后) *运用场景：项目中所有的单位显示 *过滤器例子：金钱单位的显示 *调用方法：digit = 1 **{{digit | customCurrency}} //￥1 **{{digit | customCurrency:'元'}} //元1 **{{digit | customCurrency:'元':false}}//1元 */ app.filter('unitSet', function () { //unit 单位（默认显示￥） //place 单位显示的位置(true：单位显示在数字前（默认），false：单位显示在数字后) return function (data, unit, place) { if (isNaN(data)) { return data; } else { //检查data是否有实参 var unit = unit || '￥'; var place = place === undefined ? true : place; if(place===true){ return unit + data; }else{ return data + unit; } } } }); /** *4.根据字段显示自定义内容 *@param code:array 字段编号（数组） *@param name:array 自定义文本内容（数组） *运用场景：已知编号显示自定义内容 *项目实例：根据角色代号，显示对应中文：比如字段code：101代表老板 *使用方式：{{log.type | ChangeCode:[101,102,103]:['老板','经理','员工']}} */ app.filter("ChangeCode",function () { return function (datas,code,name) { var changed = ""; code.forEach(function(co,index){ if(datas===co){ changed = name[index]; } }); return changed; } }); /** *5.筛选偶数或奇数（数组） *@param type 奇数或者偶数类型（取值：0偶数 1奇数） *@param dot 保留几位小数（取值范围：1-20） *运用场景：css样式的交叉出现（多用在表格中）或者直接单纯的过滤（不常遇到） *项目实例：单纯过滤偶数并保留两位小数 *使用方式：{{log.data | odevity:0:2}} */ app.filter("odevity",function () { return function (datas,type,dot) { var arr = []; for(var i=0;i min && datas[i] < max){ arr.push(datas[i]) } }else{ if(datas[i] > min){ arr.push(datas[i]) } } }else{ arr=datas } } return arr } }); /** *7.数据重组（regroup数组） *@param regroup 需要重组的数组 *运用场景：对一个一维数组中的数据重新组合变成一个多维数组(思路，去重-->重组) *项目实例：tab切换中在一个列表中显示多种物品（如实物中显示：充值卡（type=2）和实物(type=3)） *使用方式：在控制器中使用 $filter('Regroup')($scope.goodTyle,[[2,3]]) （$scope.goodTyle=[1,2,3,4]）==>组合后的数据[1,['2,3'],4] *注意事项，==>datas=[1,4] regroup = [2,5] *看你需要的数据是字符串还是一个数组中的数据可以自行处理 */ app.filter("Regroup",function () { return function (datas,regroup) { regroup.map(function(val){ for(var i=0;i