博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AngularJS 1.x系列:AngularJS过滤器(4)
阅读量:6261 次
发布时间:2019-06-22

本文共 8426 字,大约阅读时间需要 28 分钟。

1. AngularJS过滤器(Filter)使用方法

  AngularJS中过滤器(Filter)主要功能是格式化数据。

  AngularJS过滤器使用方法有3种:

  ◊ 在表达式{

{}}中使用

  ◊ 在指令中使用

  ◊ 在Controller或Service、Factory、Provider等服务中使用

1.1 表达式中使用过滤器

  过滤器使用管道符(|)添加到表达式或指令中。

  语法:

{
{ expression | filter }}

  可以同时使用多个过滤器,多个过滤器之间管道符(|)分隔。

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

  过滤器可以带参数,参数使用冒号(:)隔开。

{
{ expression | filter1:param1 | filter2:param2 | ... | filterN:paramN }}

1.2 指令中使用过滤器

  过滤器使用管道符(|)添加到表达式或指令中。

            
  • {
    { item.ProductName }}
    {
    { item.Quantity }}

  降序:

  • 1.3 在Controller或AngularJS服务中使用过滤器

      在Controller、Service、Factory、Provider等服务中使用过滤器方式:依赖注入

      示例:

                
    {
    { unitprice }}

      currencyFilter为AngularJS内置过滤器,用于将数字转化为货币形式。

      AngularJS提供$filter服务,可以调用所有过滤器。

                
    {
    { unitprice }} // $10,000.00 {
    { now }} // 2017-06-05 23:08:02
    $scope.unitprice = $filter("currency")(10000, "¥");  // ¥10,000.00

      $filter("name")根据名称获取对应的过滤器,把数据作为参数传递给过滤器处理。

    2. AngularJS内置过滤器

    2.1 filter

      filter过滤器用来处理数组,过滤包含某个子串的元素,过滤后的元素作为子数组返回。可以是字符串数组或对象数组。

      对象数组,则匹配属性的值。可以接收一个参数,用来定义子元素的匹配规则。

      示例:

                
    商品名称 数量 单价
    {
    { item.ProductName }}
    {
    { item.Quantity }}
    {
    { item.UnitPrice }}

                
    商品名称 数量 单价
    {
    { item.ProductName }}
    {
    { item.Quantity }}
    {
    { item.UnitPrice | currency }}

    2.2 currency

      currency货币格式化,默认为$,可以参数设置其他符号及精度。

      示例:

                
    商品名称 数量 单价
    {
    { item.ProductName }}
    {
    { item.Quantity }}
    {
    { item.UnitPrice | currency }}

      设置其他符号:

    {
    { 1000 | currency: "¥" }} // ¥1,000.00

      设置精度:

    {
    { 1000.75 | currency: "¥": 1 }} // ¥1,000.8

    2.3 number

      number过滤器用于将数字格式化为文本,可以对数字设置精度。默认保留的小数位数小于或等于3。

    {
    { 10000 | number }} // 10,000
    {
    { 3.1415926 | number }} // 3.142
    {
    { 3.1415926 | number: 2 }} // 3.14

    2.4 lowercase & uppercase

      lowercase过滤器:将字符串中的大写字母全部转换为小写。

    {
    { "Hello AngularJS" | lowercase }} // hello angularjs

      uppercase过滤器:将字符串中的小写字母全部转换为大写。

    {
    { "Hello AngularJS" | uppercase }} // HELLO ANGULARJS

    2.5 date

                
    {
    { now | date }}
    {
    { now | date: "yyyy-MM-dd" }}
    {
    { now | date: "yyyy-MM-dd HH:mm:ss" }}
    {
    { now | date: "yyyy年MM月dd日" }}

    2.5 limitTo

      limitTo过滤器:用来截取数组或字符串,参数用来指定截图长度。如果参数是负值,则从尾部开始截取。

                
    商品名称 数量 单价
    {
    { item.ProductName }}
    {
    { item.Quantity }}
    {
    { item.UnitPrice | currency }}

    {
    { "Hello" | limitTo: 2 }} // He

    2.6 orderBy

      orderBy过滤器:用来将一个数组中的元素进行排序,可以设置参数指定排序规则。

      参数:字符串,表示按照该属性名进行排序。

      参数:数组,表示依次按照数组中的属性进行排序。

      示例:

                
    商品名称 数量 单价
    {
    { item.ProductName }}
    {
    { item.Quantity }}
    {
    { item.UnitPrice | currency }}

      orderBy过滤器默认为升序。

      设置降序两种方式:

     
      // 排序属性前加减号(-)

    3. 自定义过滤器

      AngularJS自定义过滤器,调用模块实例的filter()方法。

    3.1 自定义不带参数过滤器

      filter()使用方法:

    var app = angular.module("app", []);app.filter("filterName", function() {    return function(input) {        // 逻辑处理        ...        return result;    };});

      filter()方法两个参数:

        第一个参数:过滤器名称,

        第二个参数:过滤器定义方法,必须返回一个用于处理过滤器逻辑的方法。返回的方法可接受一个参数:过滤器的输出数据。

      示例:

        
    {
    { amount | toRMB }}

      注:toRMB数字转大写方法存在Bug,不能完全正确转换。

      使用$filter调用自定义过滤器:

    app.controller("MainCtrl", ["$scope", "$filter", function ($scope, $filter) {    $scope.amount = $filter("toRMB") (1234.53);}]);

    3.2 自定义带参数的过滤器

      语法:

    app.filter("filterName", function() {    return function(input, param1, param2, ... ,paramN) {        // 逻辑处理        ...        return result;    };});

      其中:param1,param2,...,paramN为过滤器使用时传入的参数。

      示例:

                
    单价:
    商品名称 数量 单价
    {
    { item.ProductName }}
    {
    { item.Quantity }}
    {
    { item.UnitPrice | currency }}

    4. 第三方过滤器插件

    4.1 angular-filter

      官网:

      npm安装:

    npm install angular-filter

      示例:

        
    商品名称 数量 单价
    {
    { item.ProductName }}
    {
    { item.Quantity }}
    {
    { item.UnitPrice | currency }}

      其中,引入插件:

      在自定义模块中添加angular.filter注入:

    var app = angular.module("app", ["angular.filter"]);

      angular-filter部分过滤器示例:

      集合元素

      unique:从数组或对象中删除重复项。

        
    商品名称 数量 单价
    {
    { item.ProductName }}
    {
    { item.Quantity }}
    {
    { item.UnitPrice | currency }}

    转载地址:http://nxqsa.baihongyu.com/

    你可能感兴趣的文章
    Android对话框-中篇-之建立自己的对话框
    查看>>
    华为交换机VRP用户界面配置及Telnet登录实验
    查看>>
    作为一个程序员我最大的遗憾
    查看>>
    《SolidWorks 2012中文版从入门到精通》一6.5 综合实例——斜齿圆柱齿轮
    查看>>
    storm集群的监控
    查看>>
    RHCE 6.0学习笔记-2 RHEL 6 使用光盘配置本地YUM源
    查看>>
    Mongodb定期备份
    查看>>
    Confluence 6 数据库设置
    查看>>
    刨根问底-struts-怎么加载配置的相应的信息
    查看>>
    解决mysql数据库大小写敏感问题
    查看>>
    《.NET最佳实践》与Ext JS/Touch的团队开发
    查看>>
    jsp页面组成
    查看>>
    LCS记录
    查看>>
    C++开源跨平台类库集
    查看>>
    everything搜索工具小技巧
    查看>>
    一个 Sql语句优化的问题- STATISTICS 统计信息
    查看>>
    你不知道的KVO的内部实现
    查看>>
    转】MyEclipse10安装Log4E插件
    查看>>
    windows server2012r2 安装NET Framework 3.5
    查看>>
    vss整合配置连接到Myeclipse中以及中文配置
    查看>>