AngularJs Filter详解2--自定义过滤器

原创 2016年06月02日 11:15:35

在AngularJs中可以添加自定义过滤器,来过滤处理或格式化数据

实例1:

    <div ng-app="myApp" ng-controller="myCtrl">
        <p ng-repeat="x in items | arrayFilter">
            {{x}}-----转换后:{{x |dateFormat}}
        </p>
    </div>
    <script>
        //AngularJs 自定义过滤器
        //1.添加一个model,在model中定义一个过滤器
        //2.<strong>注意 对于简单基本类型过滤器执行一次,如果是数组object类型的过滤器执行两次(暂时没有详细探究)</strong>
        angular.module('common', []).filter('dateFormat', function () {
            return function (input) {
                console.info(input);
                return input * 100;
            }
        }).filter('arrayFilter', function () {
            return function (input) {
                console.info(input);
                return input;
            }
        });
        var app = angular.module('myApp', ['common']);
        app.controller('myCtrl', function ($scope) {
            $scope.items = [1, 2, 3];
        });
    </script>


2.使用过滤器处理日期格式化问题

<div ng-app="myApp" ng-controller="myCtrl">
    <p>
        {{  '/Date(1464769470711)/' | dateFormat }}
    </p>
</div>
<script>
    //AngularJs 自定义过滤器
    //1.添加一个model,在model中定义一个过滤器
    angular.module('common', []).filter('dateFormat', function () {
        return function (input) {
            if (/Date/.test(input)) {
                var result = input.match(/\d+/);
                if (result != null && result.length > 0) {
                    var number = result[0];
                    console.info(number);
                    //转换成Date对象
                    console.info(parseInt(number));
                    var date = new Date(parseInt(number));
                    var str = date.getFullYear() + "年" + date.getMonth() + "月" + date.getDay() + "日";
                    console.info(str);
                    return str;
                }
            }
            return '';
        }
    });
    var app = angular.module('myApp', ['common']);
    app.controller('myCtrl', function ($scope) {
    });
</script>



版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

AngularJs基础——过滤器filter及自定义过滤器filter

1.AngularJS的filter过滤器: uppercase|lowercase:大小写转换过滤json:json格式过滤date:日期格式过滤number:数字格式过滤currency:货币...

AngularJs Filter详解1-内置过滤器

在AngularJs中 ,过滤器可以使用一个管道符(|)添加到表达式和指令中  。 angularjs的filter功能可分为二种,一种是内置的过滤器,一种是自定义的。 AngularJs过滤去可用...

angularJS自定义过滤器筛选列表/下拉框

angularJS过滤器实现筛选列表/下拉框项目中有时会有这样的需求:用input输入框实现对select下拉框或者一个列表的筛选功能。(这是作者写的一个小demo,请忽略样式) 筛选的结果: ...

angularjs 依赖压缩以及自定义过滤器写法

呆毛如下 </

angularJS---自定义过滤器

AngularJS另一个特点就是提供了过滤器,可以通过操作UNIX下管道的方式,操作数据结果。   通过使用管道,可以便于双向的数据绑定中视图的展现。   过滤器在处理过程中,将数据变...

spring mvc自定义过滤器filter实现对请求参数编解码的代码

百度,google了半天即使再万能的stackoverflow上也没有得到解答,今天偶然间发现springmvc注解@RequestParam不是通过HttpServletRequest.java的g...

angularJS过滤器和自定义的过滤器

Title</t
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)