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