angularJS过滤器+自定义

来源：互联网发布：cc攻击 linux 编辑：程序博客网时间：2024/06/16 15:15

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);            }        }    }}]);

阅读全文

1 0