angularjs 自定义filter的简单用法

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

angularjs 自定义filter的简单用法

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的简单用法相关教程

  1. 自定义一个AXI-IP核
  2. 尚硅谷自定义View学习笔记-小白到实战
  3. AngularJS 实践:应用开发 :: ENA13 价格条码-(最后一里)
  4. Swift实现自定义TableViewCell
  5. 仿iOS自定义SwitchButton
  6. 仿QQ电话/消息切换的自定义布局结合Fragment解决你的需求!
  7. Android 自定义ImageView实现圆角/圆形 附加OnTouchListener详细
  8. android 自定义Button,满足你对Button呈现样式的一系列要求