<!DOCTYPE html>
<html lang="en" ng-app="customFilterApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-controller="customFilterCtrl">
<!--1.filter过滤器的使用--自定义函数-->
<h1>filter过滤器的使用--自定义函数</h1>
<p>{{arrStr|filter:filterCap}}</p>
<!--2.自定义过滤器----过滤出数字超过4的数字-->
<ul>
<li ng-repeat="y in numbers">
{{y | filterThan4}}
</li>
</ul>
<!--3.自定义过滤器----将字符串翻转且链接起来-->
<h2>{{ name | filterReverse}}</h2>
</body>
</html>
<script type="text/javascript" src="lib/angular.js"></script>
<script type="text/javascript">
let customFilterApp = angular.module("customFilterApp", []);
customFilterApp.controller("customFilterCtrl", function ($scope) {
//将返回第一个字母为大写的字符串
$scope.filterCap = function (str) {
return str[0] === str[0].toUpperCase();
};
//测试数据
$scope.arrStr = ["liu", "ke", "Wang", "li", "Zhu"];
$scope.numbers = [1, 3, 8, 6, 5, 2, 4];
$scope.name = "q-n-a-i-q-u-i-l";
});
//自定义过滤器----过滤出数字超过4的数字
customFilterApp.filter("filterThan4", function () {
return function (number) {
if (number > 4) {
return number;
}
return number+"是过滤掉的";
}
});
//自定义过滤器----将字符串翻转且链接起来
customFilterApp.filter("filterReverse", function () {
return function (str) {
return str.split("-").reverse().join("");
}
});
</script>
运行结果: