您的位置：首页 > Web前端 > AngularJS

angularjs 自定义filter的简单用法

2017-05-12 14:04 399 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航