关闭

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

标签: AngularJsfilter
2032人阅读 评论(0) 收藏 举报
分类:

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



0
0
查看评论

angular2 在input上使用管道(过滤器)

1.例牌,上需求 需求:用angular2进行开发Web App,登录时,用户填写的小写字母直接转换成大写字母显示:  abc=>ABC; 各位客官看到可能想打我,ng2不是有个uppercase管道吗?直接用就好了,还跑来这里讲故事,客官别急啊: {‘abc’ | upper...
  • maoguiyou
  • maoguiyou
  • 2016-12-19 18:57
  • 4104

Angular学习之过滤器<filter>

1.作用: AngularJS 过滤器可用于转换数据,相当于把数据格式化后显示 2。angularJS 提供的一些过滤器(复制字菜鸟教程:http://www.runoob.com/angularjs/angularjs-filters.html): currency 格式化数字为货币格...
  • BoomHankers
  • BoomHankers
  • 2016-12-26 19:24
  • 927

angularjs-过滤器

Filter是用来格式化数据用的。Filter的基本原型( ‘|’ 类似于Linux中的管道模式):{{ expression | filter }}Filter可以被链式使用(即连续使用多个filter):{{ expression | filter1 | filter2 | ... }}Filt...
  • sinat_31057219
  • sinat_31057219
  • 2017-02-27 09:49
  • 184

angularjs2版本创建一个数组,将数组里面的内容通过数据绑定的形式循环到table表单中

angularjs2版本创建一个数组,将数组里面的内容通过数据绑定的形式循环到table表单中
  • clt1992
  • clt1992
  • 2016-09-22 23:01
  • 4779

angular学习(十)—— Filter

转载请写明来源地址:http://blog.csdn.net/lastsweetop/article/details/54910212过滤器过滤器将表达式的运算结果格式化后呈现给用户,可以用于视图模版,控制器或者服务。angularjs有一些内置的过滤器,如果想自己自定义也很容易。在视图模版中使用过...
  • lastsweetop
  • lastsweetop
  • 2017-02-07 15:18
  • 2544

AngularJS数据绑定和数据过滤

阐述有许多的方式构建应用程序的代码,在Angular的世界里,我们推荐使用Model-View-Controller(MVC)设计模式去解耦代码和分离问题。考虑到这点,让我们使用少量的Angular和JavasScript去添加模型,视图,控制器组件到我们的App。接下来,我们学习下数据绑定跟过滤。...
  • Aey20
  • Aey20
  • 2015-12-17 22:38
  • 1284

Angular过滤器

过滤器(filter)作用就是接收一个参数,通过某个规则函数进行处理,然后返回处理后的结果。主要用在数据的格式化上,例如获取一个数组中的json对象,对数组中的元素进行排序等。angular有内置的过滤器,如:currency(货币)、date(日期)、filter(子符串匹配)、json(格式化j...
  • csdn_wanglklyn
  • csdn_wanglklyn
  • 2017-04-30 14:12
  • 324

angularjs开发常见问题-2(angularjs内置过滤器)

在angular中内置了几个常用的filter,可以简化我们的操作。过滤器使用 ‘|’ 符号,概念有点类似于linux中的管道。1、filter (过滤)filter可以根据条件过滤数据,例子:{{[{name:'coolcao',age:23},{name:'lily...
  • akemt
  • akemt
  • 2015-07-19 12:28
  • 1104

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

1.AngularJS的filter过滤器: uppercase|lowercase:大小写转换过滤json:json格式过滤date:日期格式过滤number:数字格式过滤currency:货币格式过滤filter:查找limitTo:字符串对象截取orderBy:对象排序 ...
  • bboyjoe
  • bboyjoe
  • 2016-01-04 14:50
  • 24150

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

在AngularJs中可以添加自定义过滤器,来过滤处理或格式化数据 实例1: {{x.name}}----{{x.source}} {{x.name}}--...
  • u011127019
  • u011127019
  • 2016-06-02 11:15
  • 2032
    个人资料
    • 访问:1418409次
    • 积分:16002
    • 等级:
    • 排名:第798名
    • 原创:468篇
    • 转载:153篇
    • 译文:1篇
    • 评论:151条