angular filter

过滤,有点像linux

�# 内置多个过滤器

currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)

关于货币

{{ currency_expression | currency : symbol : fractionSize}}

多个filter

{{ expression | filter1 | filter2 | ... }}

接受参数

{{ expression | filter:argument1:argument2:... }}

指令中过滤

<span ng-repeat="a in array | filter ">

在controller 和 service 中使用 filter

app.controller('testC',function($scope,$filter){
    $scope.num = $filter('currency')(123534);
  $scope.date = $filter('date')(new Date());  
}

ng内置过滤器-常用系列

1.currency

{{num | currency : '¥'}}

2.date

{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}

3.filter(匹配子串)

$scope.childrenArray = [
        {name:'kimi',age:3},
        {name:'cindy',age:4},
        {name:'anglar',age:4},
        {name:'shitou',age:6},
        {name:'tiantian',age:5}
    ];
$scope.func = function(e){return e.age>4;}

{{ childrenArray | filter : 'a' }} //匹配属性值中含有a的
{{ childrenArray | filter : 4 }} //匹配属性值中含有4的
{{ childrenArray | filter : {name : 'i'} }} //参数是对象,匹配name属性中含有i的
{{childrenArray | filter : func }} //参数是函数,指定返回age>4的

4.json(调式或者代替JSON.stringify())

{{ jsonTest | json}}

5.limitTo(限制数组的长度或者字符串的长度)

{{ childrenArray | limitTo : 2 }}  //将会显示数组中的前两项

6.number 数字的分割

{{ num | number : 2 }} // 保留两位数

7.orderBy

<div>{{ childrenArray | orderBy : 'age' }}</div>      //按age属性值进行排序,若是-age,则倒序
<div>{{ childrenArray | orderBy : orderFunc }}</div>   //按照函数的返回值进行排序
<div>{{ childrenArray | orderBy : ['age','name'] }}</div>  //如果age相同,按照name进行排序

8.自定义过滤器

app.filter('odditems',function(){
    return function(inputArray){
        var array = [];
        for(var i=0;i<inputArray.length;i++){
            if(i%2!==0){
                array.push(inputArray[i]);
            }
        }
        return array;
    }
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,631评论 0 3
  • 转载文章 angularjs 过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回...
    飞将军阅读 617评论 0 2
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,841评论 18 139
  • angular中filter过滤器主要有两个作用:格式化数据和过滤数据。filter组件共有以下几种:1、curr...
    小弋呀阅读 694评论 0 4
  • 大家好,我是IT修真院成都分院第7期的学员韩建名,一枚正直纯洁善良的WEB前端程序员。 今天给大家带来的是:简述a...
    inh_阅读 516评论 0 1