加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 10:08:17 所属栏目:安全 来源:网络整理
导读:在AngularJs中可以添加自定义过滤器,来过滤处理或格式化数据 实例1: div ng-app="myApp" ng-controller="myCtrl" p ng-repeat="x in items | arrayFilter" {{x}}-----转换后:{{x |dateFormat}} /p /div script //AngularJs 自定义过滤器 //1.添加一个mode

在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',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>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读