Angular学习之过滤器<filter>

最新推荐文章于 2022-01-14 17:01:08 发布

HanLaotwo

最新推荐文章于 2022-01-14 17:01:08 发布

阅读量2.3k

点赞数

文章标签： Angular angularjs filter 数据格式化

本文链接：https://blog.csdn.net/BoomHankers/article/details/53888572

版权

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.举个栗子：

效果图：

这里的过滤器reverse是angualr中提供的实例，test是自己编写的filter。
reverse将字母倒置，test在输入长度超过13时显示...
html代码：
<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>
JS代码：
//-------------------------------过滤器-------------------------------
    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;
        };
    });

源代码：https://github.com/HanlaoTwo/StudyAngular

HanLaotwo

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

currency	格式化数字为货币格式。
filter	从数组项中选择一个子集。
lowercase	格式化字符串为小写。
orderBy	根据某个表达式排列数组。
uppercase	格式化字符串为大写。