1.作用:AngularJS 过滤器可用于转换数据,相当于把数据格式化后显示
2。angularJS 提供的一些过滤器(复制字菜鸟教程:http://www.runoob.com/angularjs/angularjs-filters.html):
currency 格式化数字为货币格式。 filter 从数组项中选择一个子集。 lowercase 格式化字符串为小写。 orderBy 根据某个表达式排列数组。 uppercase 格式化字符串为大写。
3.使用方法:
angualr过滤器的使用方法【{{value|filter}}】,值或者能表示一个值得变量加一个管道符“|”,后面接上filter的名字比如:
test过滤器: {{greeting|test}}。也可以在控制器中以函数的方法调用比如:
$scope.filteredGreeting = reverseFilter($scope.greeting);
4.举个栗子:
效果图:
源代码:https://github.com/HanlaoTwo/StudyAngular这里的过滤器reverse是angualr中提供的实例,test是自己编写的filter。 reverse将字母倒置,test在输入长度超过13时显示...html代码:
JS代码:<body ng-app="myReverseFilterApp" style="width: 750px;margin: 0px"> 此div中的控制器MyController <div ng-controller="MyController"> <input ng-model="greeting" type="text"><br> <!-- angualr过滤器的使用方法【{{value|filter}}】,值或者能表示一个值得变量加一个管道符“|”,后面接上filter的名字 这里的过滤器reverse是angualr中提供的实例,test是自己编写的filter。 reverse将字母倒置,test在输入长度超过13时显示...--> 没有过滤器: {{greeting}}<br> Reverse过滤器: {{greeting|reverse}}<br> 在controller中使用Reverse: {{filteredGreeting}}<br> test过滤器: {{greeting|test}} <hr/> <hr/> </div>
//-------------------------------过滤器------------------------------- app.controller('MyController', ['$scope', 'reverseFilter', function ($scope, reverseFilter) { //定义model $scope.greeting = 'hello'; //调用函数的方法使用过滤器 $scope.filteredGreeting = reverseFilter($scope.greeting); }]); app.filter('reverse', function () { return function (input, uppercase) { input = input || ''; var out = ''; for (var i = 0; i < input.length; i++) { out = input.charAt(i) + out; } // conditional based on optional argument if (uppercase) { out = out.toUpperCase(); } return out; }; }); app.filter('test', function () { return function (input) { var out; if (input.length > 15) { out = input.substr(0, 13) + "..." } else out = input; return out; }; });