本文实例讲述了AngularJS自定义过滤器用法。分享给大家供大家参考,具体如下:
<>强过滤器结构
{{带过滤数据|过滤器名:参数1:参数2:参数3 .....}}
app.filter('过滤器名,函数(){
返回函数(待过滤数据,参数....){
……
返回已过滤数据;
}
之前
<强>示例一:是否包含
& lt; !doctype html>
& lt; html ng-app=癿yApp”比;
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt;脚本src=" http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div ng-controller=癿yAppCtrl”比;
& lt; div>
& lt; table>
& lt; tr>
& lt; th> Name
& lt; th> Phone
& lt;/tr>
& lt; !——写法1——比;
& lt; tr ng-repeat=芭笥训呐笥褆 myfilter”比;
& lt; !——写法2——比;
& lt; !——& lt; tr ng-repeat="朋友newArr=(朋友| myfilter)“祝辞——比;
& lt; td> {{friend.name}} & lt;/td>
& lt; td> {{friend.phone}} & lt;/td>
& lt;/tr>
& lt;/table>
& lt;/div>
& lt;/div>
& lt;脚本type=" text/javascript祝辞
应用var=角。模块(“myApp”, []);
app.controller (“myAppCtrl”、“$”范围,函数(范围){
$ scope.friends=[{名称:“约翰”,电话:“44555 - 1276”},
{名称:“安妮”,电话:800 -大-玛丽”},
{名称:“迈克”,电话:11555 - 4321”},
{名称:“亚当”,电话:33555 - 5678”},
{名称:“大卫”,电话:387555 - 8765”},
{名称:“Mikay”,电话:555 - 5678”}];
}));
app.filter (“myfilter函数(){
返回函数(输入){
var输出=[];
角。forEach(输入、函数(值,键){
console.log (“valuehttps://www.yisu.com/zixun/==? JSON.stringify(值));
console.log(“价值。手机类型==" + typeof (value.phone));
console.log (“value.phone。indexOf==" + value.phone.indexOf (" 555 "));/* js中没有包含方法,使用indexOf来判断字符串是否包含*//* indexOf字符串出现的位置,没有则返回1 *///方法一:
如果(value.phone.indexOf(“555”)在=0){
output.push(价值);
}//方法二://如果(value.phone.indexOf (“555”) !==1) {//output.push(价值);//}
})；
返回输出;
}
})；
& lt;/script>
& lt;/body>
& lt;/html>
之前
<强>示例二:倒序
& lt; !doctype html>
& lt; html ng-app=癿yApp”比;
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt;脚本src=" http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div ng-controller=癿yAppCtrl”比;
姓名:{{名称}}& lt; br>
倒序:{{名称|反向}}& lt; br>
倒序并大写:{{名称|逆转:真}}
& lt;/div>
& lt;脚本type=" text/javascript祝辞
var myAppModule=角。模块(“myApp”, []);
myAppModule。控制器(“myAppCtrl”(“$”范围、功能范围($){
$ scope.name=皒uqiang”;
}));
myAppModule。过滤器(“逆转”,函数(){
返回函数(输入,大写){
& lt; !——输入就是其名字中代表的值。——比;
& lt; !——大写这个bool值,判断是否要进行大小写转换。——比;
var=" ";
(var=0;我& lt;input.length;我+ +){=input.charAt(我)+;
}
如果(大写){=out.toUpperCase ();
}
返回;
& lt; !——返回过滤后的字符串——比;
}
})；
& lt;/script>
& lt;/body>
& lt;/html>
之前
<强>示例三:替换
& lt; !doctype html>
& lt; html ng-app=癿yApp”比;
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt;脚本src=" http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js "祝辞& lt;/script>
& lt;/head>
& lt;身体ng-controller=癿yAppCtrl”比;
& lt; div>
& lt; div>
{{欢迎| replaceHello}} & lt; br/比;
{{欢迎| replaceHello: 3:5}} & lt; br/比;
& lt;/div>
& lt;/div>
& lt;脚本type=" text/javascript祝辞
应用var=角。模块(“myApp”, []);
app.controller (“myAppCtrl”、“$”范围,函数(范围){
美元的范围。欢迎=澳愫肁ngularJs”;
}));//自定义过滤器
app.filter (replaceHello,函数(){
返回函数(输入、n1、n2) {
控制台。日志输入(“输入==" +);
控制台。日志(“n1==" + n1);
控制台。日志(n2==+ n2);
返回输入。替换(/Hello/, '您好”);
}
})；
& lt;/script>
& lt;/body>
& lt;/html>
