Angular系列之自定义filter（六）

<!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>
运行结果：
Angular系列之自定义filter（六）

猜你喜欢
