angularjs 自定义filter的简单用法

来源：互联网发布：算法工程师自学编辑：程序博客网时间：2024/06/05 06:22

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

1 0