angularJS过滤器+自定义
angularJS过滤器
1、uppercase,lowercase 大小写转换
{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRING {{ "TANK is GOOD" | lowercase }} // 结果:tank is good
2、date 格式化
{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25
3、number 格式化(保留小数)
{{149016.1945000 | number:2}}
4、currency货币格式化
{{ 250 | currency }} // 结果:$250.00 {{ 250 | currency:"RMB ¥ " }} // 结果:RMB ¥ 250.00
5、filter查找
输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集
// 查找name为iphone的行 {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | filter:{'name':'iphone'} }}
6、limitTo 截取
{{"1234567890" | limitTo :6}} // 从前面开始截取6位 {{"1234567890" | limitTo:-4}} // 从后面开始截取4位
7、orderBy 排序
// 根id降序排 {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id':true }} // 根据id升序排 {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id' }}
自定义
过滤器结构
{{带过滤数据 | 过滤器名:参数1:参数2:参数3.....}}
app.filter('过滤器名', function () {
return function (待过滤数据, 参数....) {
......
return 已过滤数据;
}
<span class="hlxny-xbfx-span" ng-bind="x.jxReason | hyJXReason" ></span>
hyMui.launcherNavi({ displayUrl: 'pagesV2/launcherNavi/launcherNavi.html' }); var app = hyMui.bootstrap('app', ['onsen', 'haiyiMobile'], {debug: false,launcherLogin:true}); app.filter('hydate', ['$filter', function ($filter) { return function (input, format) { if (!input || input.length <= 0) { input = new Date(); } else { var dateParse = Date.parse(input.toString().replace(/\-/g, '\/')); if (isNaN(dateParse)) input = new Date(); else input = new Date(dateParse); } var date = $filter('date')(input, format); return date; }; }]); app.filter('hyJXReason', ['$filter', function ($filter) { return function (item, format) { if (!item || item.length <= 0) { return; } if(item == "A" ){ return "雷击"; }else if(item == "B"){ return "外力破坏"; }else if(item == "C"){ return "自然灾害"; }else if(item == "D"){ return "特殊气象"; }else if(item == "E"){ return "污闪"; }else if(item == "F"){ return "小动物"; }else if(item == "G"){ return "设备老化"; }else if(item == "H"){ return "被盗"; }else if(item == "I"){ return "产品质量"; }else if(item == "J"){ return "施工质量"; }else if(item == "K"){ return "过载"; }else if(item == "L"){ return "设计不当"; }else if(item == "M"){ return "操作不当"; }else if(item == "N"){ return "用户设备故障引起"; }else if(item == "O"){ return "保护误动拒动"; }else if(item == "P"){ return "其他"; }else if(item == "Q"){ return "原因不明"; } }; }]); app.filter('cutStr', ['$filter', function ($filter) { return function (input) { if (!input) return ''; if (input.length <= 8) return input; var arr = input.split("-"); var temp = arr[0]; var tail = arr[1]; input = temp.substr((temp.length - 8), temp.length); // //去掉后8位的前面0位 if (input == "000000000") { return "0" + "-" + tail; } input = input.replace(/\b(0+)/gi, ""); return "充电枪" + input + "-" + tail; }; }]); app.filter('socialDate', ['$filter', function ($filter) { return function (input, format) { if (!input || input.length <= 0) return ''; var inputDate = new Date(Date.parse(input.toString().replace(/\-/g, '\/'))); if (!inputDate.getFullYear()) inputDate = new Date(Date.parse(input.toString())); var date = new Date(); if ('yyyy' == format) { var year = date.getFullYear(); var inputYear = inputDate.getFullYear(); switch (year - inputYear) { case 0: return '今年'; case 1: return '去年'; case -1: return '明年'; default: return inputYear + '年'; } } else if ('MM' == format) { var year = date.getFullYear(); var inputYear = inputDate.getFullYear(); var month = date.getMonth(); var inputMonth = inputDate.getMonth(); if (year != inputYear) return (inputMonth + 1) + '月'; switch (month - inputMonth) { case 0: return '本月'; default: return (inputMonth + 1) + '月'; } } else if ('dd' == format) { var year = date.getFullYear(); var inputYear = inputDate.getFullYear(); var month = date.getMonth(); var inputMonth = inputDate.getMonth(); var day = date.getDate(); var inputDay = inputDate.getDate(); if (year == inputYear && month == inputMonth) { switch (day - inputDay) { case 0: return '今天'; case 1: return '昨天'; case 2: return '前天'; case -1: return '明天'; default: return inputDay + '日'; } } else { return inputDay + '日'; } } return input; } }]); /** * 手机号中间四位显示 * */ app.filter('showMobileFiter', ['$filter', function ($filter) { return function (mobile) { if (typeof mobile == 'undefined') { return '****'; } return mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'); }; }]); /** *日期格式化,显示年月日 */ app.filter('formatStrDate', ['$filter', function ($filter) { return function (input) { var date = new Date(input); var formatDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate(); return formatDate; }; }]); /** *充电站详细,显示电压 * 1 200-500V * 2 250-750V * 3 其他 */ app.filter('volFilter', ['$filter', function ($filter) { return function (input) { if (null == input || '' == input) { return '其他'; } if (1 == input || '1' == input || parseInt(input) == 1) { return '200-500V'; } if (2 == input || '2' == input || parseInt(input) == 2) { return '250-700V'; } if (3 == input || '3' == input || parseInt(input) == 3) { return '220/380V'; } if (4 == input || '4' == input || parseInt(input) == 4) { return '其他'; } return '200-500V'; }; }]); /** * 格式化数字,显示小数点后两位 */ app.filter('formatNumber', ['$filter', function ($filter) { return function (number) { var newPar = /^(-|\+)?\d+(\.\d+)?$/; if (newPar.test(number)) { var s = number.toString().split('.'); if (s.length == 1) return s + '.00'; if (s.length > 1) { var a = s[0]; var b = s[1]; if (b.length < 2) return a + '.' + b + '0'; if (b.length < 3) return number; else return a + '.' + b.substr(0, 2); } } } }]);