angularjs入门

当前位置:首页>AngularJS>angularjs入门>AngularJs 在线教程 自定义过滤器 入门教程 开发指

AngularJs 在线教程 自定义过滤器 入门教程 开发指

时间:2015-08-07 16:46来源:网络整理 作者:KKWL 点击:
AngularJS入门教程:自定义过滤器表达式:↔ expression | filter1 | filter2 | ... }}↔ expression | filterName : parameter1 : ...parameterN }}ng-repeat="a in array | filter " 一、第一种单参数过滤器: 原有数据:

AngularJS入门教程:自定义过滤器 表达式: ↔ expression | filter1 | filter2 | ... }} ↔ expression | filterName : parameter1 : ...parameterN }} ng-repeat="a in array | filter "

一、第一种单参数过滤器:
原有数据:{{names[0].name}}
过滤数据:{{names[0].name | filter1}}

本节课程源码: 一、第一种过滤器:
原有数据:↔names[0].name}}
过滤数据:↔names[0].name | filter1}} app.filter('filter1', function(){ return function(item){ return item + '[追加内容:单参数在此过滤!]'; } });

二、第二种带参数过滤器:
原有数据:{{names[0].name}}
过滤数据:{{names[0].name | filter2:5 }}

本节课程源码: 二、第二种带参数过滤器:
原有数据:↔names[0].name}}
过滤数据:↔names[0].name | filter2:5 }} app.filter('filter2', function(){ return function(item,num){ for(var i = 0;i < num;i++){ item = item + '!'; } return item; } });

三、第三种数组过滤器:

  • {{word}}
  • 本节课程源码: 三、第三种数组过滤器:
  • ↔word}}
  • app.filter('filter3', function(){ return function(items){ angular.forEach(items,function(item, i){ item = i+'、'+ item + '==='; }); return items; } });

    四、首字母大写过滤器:
    {{'this is angular js course on each.com' | filter4}}

    本节课程源码: 四、首字母大写过滤器:
    ↔'this is angular js course on each.com' | filter4}} app.filter('filter4', function(){ return function(input) { var words = input.split(' '); for (var i = 0; i < words.length; i++) { words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1); } return words.join(' '); } });

    ------分隔线----------------------------