angularjs 自定义filter的简单用法

作者:神秘网友发布时间:2020-09-07 21:13:10

angularjs 自定义filter的简单用法

自定义一个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

angularjs 自定义filter的简单用法

结果：

angularjs 自定义filter的简单用法

最后附上本人常用的过滤字数的过滤器，当字符个数超过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;
        }
    })

angularjs 自定义filter的简单用法

angularjs 自定义filter的简单用法

angularjs 自定义filter的简单用法相关教程