angular 1x -- 过滤器（filter）

作者: 反者道之动001 | 来源:发表于2017-07-26 09:58 被阅读20次

angular 1x -- 过滤器（filter）
angular pipe 自定义管道
过滤器filter
angular 过滤器$filter
Spring系列之Filter and Interceptor
数组过滤器
java基础-day42-Filter、Listener和Bas
Spring Boot使用过滤器Filter
Filter
22. 过滤器

filter -- 恕我直言，这就是一个框架作者的爱好,很多文章，写的也不错，但是有很多基本对新手不够友好（这本来就是新手看的，还不友好那有个屁用）。

概念

顾名思义，修改值并返回新值

用法

| 区分，在数据展示的时候过滤，如

{{ 999 | number:2 }} //999.00

angular自带指令

JSON

 Object | json

保留小数

Number | number:2

文本大写转小写

{{  文本A-Z ... | lowercase }}

文本小写转大写

{{ 文本a-z ... | uppercase }}

更多，请看官网，传送门： https://docs.angularjs.org/api/ng/filter

自定义指令

看了上面的代码，有点了解了，自定义指令就是创建一个新的指令，用法跟自定义指令一样

如：

app.controller('personCtrl', function($scope) {
    $scope.message = "test";
});

使用:

<h1>{{ message|reverse }}</h1>

<br />

上一个完整代码：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    
    <div ng-controller="personCtrl">
        <h1>{{ message|reverse }}</h1>
        <input type="text" ng-model="message">
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.filter("reverse", function(){
            return function(text){
                return text.split("").reverse().join("");
            }
        });
        app.controller('personCtrl', function($scope) {
            $scope.message = "test";
        });
    </script>

</body>
</html>

--OK--