• AngularJs过滤器


    内置过滤器

    1、currency(货币处理)

      currency可以将数字格式转化为货币的形式,如果不传参数,默认为$。

    1 {{num|currency:"¥"}}

      展现的形式为¥xxx。

    2、date(日期格式化)

      angular中提供的date过滤器能够满足一般的时间格式要求。

    {{date|date:'y-m-d h:m:s EEEE'}}

      展现形式为:年-月-日 时:分:秒 星期,它们之间的格式可以自由组合,脱离了原生js中的单调和复杂性。

    3、filter(匹配字符串)

      filter用来处理数组,然后可以挑选出含有的所选中的子串元素,作为子数组来返回。可以是字符串数组,也可以是对象数组。如果是对象数组,可以匹配属性的值,它接受一个参数,来定义子串的规则。

    1 $scope.arr = ["Monday","Tuesday","星期三","星期四","周五","周六"];
    1 <li>{{arr|filter:'d'}}</li>
    2 <li>{{arr|filter:'周'}}</li>

      它能选出数组中含有字母“d”、含有汉子“周”的元素,然后分别以数组的形式返回。

    4、json(格式化json对象)

      json过滤器可以把一个js对象格式化为json字符串,没有参数。这东西有什么用呢,官网说它 可以用来进行调试,嗯,是个不错的选择。或者,也可以用在js中使用,作用就和我们熟悉的JSON.stringify()一样。

    1 {{ jsonTest | json}}

    5、limitTo(限制数组长度或字符串长度)

      limitTo过滤器用来截取数组或者字符串的长度,接收一个参数用来指定要截取的数组或者字符串的长度,如果值为负数,那么就从数组或者字符串的尾部开始截取。

    1 <li>{{arr|limitTo:'3'}}</li>

      它会截取数组arr的前三位,然后以数组的形式返回。

    6、lowercase(小写格式)

      把英文字母全部转化成小写的形式,也没有太大的用处。没有参数。

    <li>{{da|lowercase}}</li>

      这里只能转换英文,遇到其他的则不转换。

    7、uppercase(大写格式)

      这个的写法跟lowercase相同。

    8、number(格式化数字)

      number过滤器可以为一串数字进行分位,相当于千位分割符,如:123,456,789。可以接收一个参数,指定float类型保留几位小数。

    <li>{{num|number:2}}</li>

      这个就表示保留小数点后两位。

    9、orderBy(排序)

      orderBy过滤器可以将数组中的元素进行排序,接收一个参数指定排序的规则,参数可以是字符串,表示以这个属性名称进行排序;可以是一个函数,定义排序属性;可以是一个数组,表示依次按数组的属性值进行排序。

    1 $scope.err = [
    2             {name : 'jack',age : 30},
    3             {name : 'mack',age : 24},
    4             {name : 'sunny',age : 28},
    5             {name : 'jim',age : 20},
    6             ]
    1 <li>{{err|orderBy:'age':true}}</li>

      这个就是以age的从大到小进行排序。

    自定义过滤器

     1 <div ng-controller = 'con'>
     2         <div>{{msg|prz}}</div>
     3     </div>
     4     <script src="public/libs/angular/angular.min.js"></script>
     5     <script>
     6         var App = angular.module('App',[]);
     7         App.controller('con',['$scope',function($scope){
     8             $scope.msg = 'you can kill';
     9         }])
    10         App.filter('prz',function(){
    11             return function(z){
    12                 return z[0].toUpperCase()+z.slice(1); 
    13             }
    14         })
    15     </script>

      上面代码表示,自定义一个首字母大写的过滤器。

  • 相关阅读:
    让你提升命令行效率的 Bash 快捷键
    关于jquery源码中undefined作为参数的理解
    前端手机抓包流程(window)
    前端开发--环境配置
    Code Review的人理解
    JS 组件化开发 系列(一)
    mac 安装sass时遇到gem 的镜像错误
    SpringBoot 整合mybatis
    项目知识点完善
    学习过程京东注册的静态界面
  • 原文地址:https://www.cnblogs.com/zhen-prz/p/10525920.html
Copyright © 2020-2023  润新知