zoukankan      html  css  js  c++  java
  • AngularJs过滤器

    angularjs的内置过滤器:

    一个过滤器不带参数:  {{expression | filter}}

    一个过滤器带参数:{{expression | filter:arguments}}

    一个过滤器,带多个参数:{{expression | filter: arg1:arg2: ···}}

    多个过滤器不带参数: {{expression | filter1 | filter2 | ···}}

    1、filter

    var childArray = [{name: 'Kimi', age: 3}, {name: 'cindy', age: 4}];
    
    {{childArray | filter: 'a'}}   //匹配属性值中含有字符'a'的
    
    {{childArray | filter: 4}}    //匹配属性值中含有4的
    
    {{childArray | filter: {name: 'i'}}}    //匹配name属性值中含有字符'i'的
    
    {{childArray | filter: func}}    //根据过滤函数,指定返回age>4的
    func = function(child){
        return child.age > 4;
    }
    

    2、orderBy

    {{childArray | orderBy: 'age'}}   //按age属性值进行排序,若-age则倒序
    
    {{childArray | orderBy: ['age', 'name']}}  //先按age排序,age相同按name排序
    
    {{childeArray | orderBy: orderFunc }}  //按函数返回值进行排序

    3、lowercase、uppercase

    {{ 'MyString'  | lowercase}}   //小写
    
    {{'MyString' | uppercase}}    //大写

    4、number

    {{ 123.5678  | number: 3}}     //精确到小数点后3位
    
    js:
    
    $filter('number')(123.5678, 3)  //精确到小数点后3位,第二个参数可选,表示小数点后精确位数,默认值3

    5、limitTo   

    <div ng-repeat=' value in values | limitTo:6 '>   //限制数组长度或字符串长度,若为负值,从数组尾部截取

    6、date

    {{date_expression  | date: 'yyyy-MM-dd hh:mm:ss EEEE'}}
    
    js:
    var today = new Date();
    $filter('date')(tody, 'yyyy-MM-dd HH:mm:ss')

    7、currency

    {{ 12 | currency}}  <!--将12格式化为货币,默认单位符号为 '$', 小数默认2位-->
    2 
    3 {{ 12.45 | currency:'¥'}} <!--将12.45格式化为货币,使用自定义单位符号为 '¥', 小数默认2位-->
    4 
    5 {{ 12.45 | currency:'CHY¥':1}} <!--将12.45格式化为货币,使用自定义单位符号为 'CHY¥', 小数指定1位, 会执行四舍五入操作 -->
    6 
    7 {{ 12.55 | currency:undefined:0}} <!--将12.55格式化为货币, 不改变单位符号, 小数部分将四舍五入 -->

    8、json

    {{jsonTest | json}}

    9、percent

    {{width | percent: 1}}    //百分比

  • 相关阅读:
    百度地图Api 根据两个坐标点计算距离
    Android 6.0 Permission权限与安全机制
    CentOS安装nginx
    CentOS安装mysq
    CentOS安装JDK
    -bash: /root/java/jdk/bin/java: cannot execute binary file
    数据库连接池之_DButils
    数据库连接池之_c3p0
    数据库连接池之_Druid简单使用
    后台管理平台编辑表格
  • 原文地址:https://www.cnblogs.com/xuepei/p/7511592.html
Copyright © 2011-2022 走看看