angularJS过滤器+自定义

最新推荐文章于 2021-08-11 19:45:32 发布

原创最新推荐文章于 2021-08-11 19:45:32 发布 · 373 阅读

0 ·

CC 4.0 BY-SA版权

HTML 同时被 3 个专栏收录

30 篇文章

订阅专栏

Web前端

23 篇文章

订阅专栏

angularJS

9 篇文章

订阅专栏

本文介绍了AngularJS内置的多种过滤器及其用法，包括大小写转换、日期格式化、数值和货币格式化等，并展示了如何使用filter过滤器从数组中筛选数据及自定义过滤器的方法。

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

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

        }

    }
}]);