angularjs 自定义filter的简单用法

最新推荐文章于 2022-02-23 10:00:51 发布

爱谁谁2066

最新推荐文章于 2022-02-23 10:00:51 发布

阅读量291

点赞数 1

本文链接：https://blog.csdn.net/u013351986/article/details/71713581

版权

自定义一个filter，

作用：将输入字符串的首字母、第4个字母、特殊字符‘b’都转换成大写

用法：

1.{{}}------------------Result: {{ yourinput | capitalize_as_you_want:3:'b' }}

2.ng-bind------------<h1 ng-bind="(yourinput | capitalize_as_you_want:3:'b') + ' Km/h'></h1>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="ngCustomFilterTest" >

    <input ng-model="yourinput" type="text">
    <br />
    Result: {{ yourinput | capitalize_as_you_want:3:'b' }}

</div>

<script type="text/javascript">
    (function () {
        var app = angular.module('ngCustomFilterTest', []);
        app.filter('capitalize_as_you_want', function () {
            return function (input, capitalize_index, specified_char) {

                console.log("input",input);
                console.log("capitalize_index",capitalize_index);
                console.log("specified_char",specified_char);

                input = input || '';
                var output = '';
                var customCapIndex = capitalize_index || -1;
                var specifiedChar = specified_char || '';
                for (var i = 0; i < input.length; i++) {
                    // 首字母肯定是大写的， 指定的index的字母也大写
                    if (i === 0 || i === customCapIndex) {
                        output += input[i].toUpperCase();
                    }
                    else {
                        // 指定的字母也大写
                        if (specified_char != '' && input[i] === specified_char) {
                            output += input[i].toUpperCase();
                        }
                        else {
                            output += input[i];
                        }
                    }
                }
                return output;
            };
        });

    })();
</script>
</body>
</html>

其中，

Result: {{ yourinput | capitalize_as_you_want:3:'b' }}

‘3’，‘b’都作为参数传入，即

capitalize_index = 3；specified_char = ‘b’

input = yourinput

结果：

最后附上本人常用的过滤字数的过滤器，当字符个数超过limitNum时，显示省略号

.filter('wordLimitNumFilter', function () {
        return function (input ,limitNum) {
            input  = input || '';
            var output = '';
            limitNum =limitNum || 10;//默认显示10个
            if(input.length > limitNum){
                output = input.substring(0, limitNum) + '...';
                return output;
            }
            return input;
        }
    })

爱谁谁2066

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs 自定义filter的简单用法

自定义一个filter，作用：将输入字符串的首字母、第4个字母、特殊字符‘b’都转换成大写 Result: {{ yourinput | capitalize_as_you_want:3:'b' }} (function () { var app = angular.module('ngCus
复制链接

扫一扫