189 8069 5689

AngularJS怎么使用过滤器-创新互联

这篇文章给大家分享的是有关AngularJS怎么使用过滤器的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联公司技术团队10多年来致力于为客户提供网站建设、网站制作、高端网站设计、成都营销网站建设、搜索引擎SEO优化等服务。经过多年发展，公司拥有经验丰富的技术团队，先后服务、推广了近千家网站，包括各类中小企业、企事单位、高校等机构单位。

一、为什么使用过滤器？

在实际操作中，我们需要对统一数据源进行多次转换，比如我的货币单位，在不同的国家我们将用不同的符号表示。因此，你可能会想到在控制器中判断国家以显示不同的结果，但是过滤器却可以更好的帮助我们做到同样的效果。

过滤器将数据在被指令处理并显示到视图之前进行转换，而不必修改作用域中原有的数据，这样能够允许同一份数据在应用中的不同部分以不同形式得以展示。

接下来，我们详细讨论有关过滤器的用法

二、过滤单个数据的值

下表展示用于单个数据的内置过滤器

AngularJS怎么使用过滤器 

先来看看我们的准备案例，待会我们将在这个案例的基础上来使用内容过滤器





  Angluar test
  
  
  


  
    
      Products
      {{products.length}}
    
                               NameCategoryExpiryPrice                                          {{p.name}}             {{p.category}}             {{p.expiry}}             {{p.price}}                                
   var myApp = angular.module("exampleApp", []); myApp.controller("defaultCtrl", function ($scope) {   $scope.products = [     { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },     { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },     { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },     { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },     { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },     { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },     { name: "Beer", category: "Drinks", price: 2.99, expiry: 365 },     { name: "Wine", category: "Drinks", price: 8.99, expiry: 365 },     { name: "Whiskey", category: "Drinks", price: 45.99, expiry: 365 }   ]; })

就是一个表格的形式来展示产品的详细情况的案例

AngularJS怎么使用过滤器

1.格式化货币值


  {{p.name}}
  {{p.category}}
  {{p.expiry}}
  
  {{p.price | currency}}

AngularJS怎么使用过滤器

2.格式化数字值


  {{p.name}}
  {{p.category}}
  {{p.expiry}}
  
  {{p.price | number : 3}}

AngularJS怎么使用过滤器

3.格式化日期

// 在控制器中添加
$scope.getExpiryDate = function (days) {
  var now = new Date();
  return now.setDate(now.getDate() + days);
}

  {{p.name}}
  {{p.category}}
  
  {{getExpiryDate(p.expiry) | date : 'yyyy/MM/dd'}}
  
  {{p.price}}

AngularJS怎么使用过滤器

4.改变字符串大小写


  
  {{p.name | uppercase}}
  {{p.category | lowercase}}
  {{getExpiryDate(p.expiry) | date : 'yyyy/MM/dd'}}
  
  {{p.price}}

AngularJS怎么使用过滤器

5.生成JSON


  
  {{p.name | json}}
  {{p.category}}
  {{getExpiryDate(p.expiry) | date : 'yyyy/MM/dd'}}
  
  {{p.price}}

AngularJS怎么使用过滤器

6.本地化过滤器输出

需要移入本地化JS文件




  {{p.name}}
  {{p.category}}
  {{p.expiry}}
  
  {{p.price | currency}}

AngularJS怎么使用过滤器

三、过滤集合

1.限制项目的数量—limitTo过滤器





  Angluar test
  
  
  


  
    
      Products
      {{products.length}}
    
           Limit:                                      NameCategoryExpiryPrice                                                     {{p.name}}             {{p.category}}             {{p.expiry}}             {{p.price | number : 2}}                                    var myApp = angular.module("exampleApp", []); myApp.controller("defaultCtrl", function ($scope) {   $scope.products = [     { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },     { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },     { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },     { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },     { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },     { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },     { name: "Beer", category: "Drinks", price: 2.99, expiry: 365 },     { name: "Wine", category: "Drinks", price: 8.99, expiry: 365 },     { name: "Whiskey", category: "Drinks", price: 45.99, expiry: 365 }   ];   // 显示的条数   $scope.limitVal = '5';   // 在限制条数的范围条项   $scope.limitRange = [];   for (var i = (0 - $scope.products.length); i <= $scope.products.length; i++) {     $scope.limitRange.push(i.toString());   } })

单击下拉列表，根据提示显示不同的条数，负数表示从后往前取

AngularJS怎么使用过滤器

2.选取项—filter过滤器





  Angluar test
  
  
  


  
    
      Products
      {{products.length}}
    

    
      
        
          NameCategoryExpiryPrice
        
        
          
          
            {{p.name}}
            {{p.category}}
            {{p.expiry}}
            {{p.price | number : 2}}
          
        
      
    
  




var myApp = angular.module("exampleApp", []);
myApp.controller("defaultCtrl", function ($scope) {
  $scope.products = [
    { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
    { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
    { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },
    { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },
    { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },
    { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },
    { name: "Beer", category: "Drinks", price: 2.99, expiry: 365 },
    { name: "Wine", category: "Drinks", price: 8.99, expiry: 365 },
    { name: "Whiskey", category: "Drinks", price: 45.99, expiry: 365 }
  ];
  // 自定义过滤器
  $scope.selectItems = function (item) {
    // 仅仅保留类别为Fish或者name=='Beer'的行
    return item.category == 'Fish' || item.name == 'Beer';
  }

})

仅仅保留类别为Fish或者name=='Beer'的行

AngularJS怎么使用过滤器

3.对项目进行排序—orderBy过滤器





  Angluar test
  
  
  


  
    
      Products
      {{products.length}}
    

    
      
        
          NameCategoryExpiryPrice
        
        
          
          
          
          
          
          
          
          
            {{p.name}}
            {{p.category}}
            {{p.expiry}}
            {{p.price | number : 2}}

          
        
      
    
  





var myApp = angular.module("exampleApp", []);
myApp.controller("defaultCtrl", function ($scope) {
  $scope.products = [
    { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
    { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
    { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },

    { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },
    { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },
    { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },

    { name: "Beer", category: "Drinks", price: 2.99, expiry: 365 },
    { name: "Wine", category: "Drinks", price: 8.99, expiry: 365 },
    { name: "Whiskey", category: "Drinks", price: 45.99, expiry: 365 }
  ];
  // 自定义函数排序
  $scope.customOrder = function (item) {
    // 保质期<5的不排序，其他的按照价格升序排序
    return item.expiry < 5 ? 0 : item.price;
  }
})

保质期<5的不排序，其他的按照价格升序排序

AngularJS怎么使用过滤器 

四、链式过滤器

就是将过滤器串联起来综合使用





  Angluar test
  
  
  


  
    
      Products
      {{products.length}}
    

    
      
        
          NameCategoryExpiryPrice
        
        
          
          
            {{p.name}}
            {{p.category}}
            {{p.expiry}}
            {{p.price | number : 2}}

          
        
      
    
  







var myApp = angular.module("exampleApp", []);

myApp.controller("defaultCtrl", function ($scope) {
  $scope.products = [
    { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
    { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
    { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },

    { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },
    { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },
    { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },

    { name: "Beer", category: "Drinks", price: 2.99, expiry: 365 },
    { name: "Wine", category: "Drinks", price: 8.99, expiry: 365 },
    { name: "Whiskey", category: "Drinks", price: 45.99, expiry: 365 }
  ];
  // 自定义函数排序
  $scope.customOrder = function (item) {
    // 保质期<5的不排序，其他的按照价格升序排序
    return item.expiry < 5 ? 0 : item.price;
  }

})

先按照自定义customOrder函数以price倒序排列，然后只取得5条数据

AngularJS怎么使用过滤器

五、自定义过滤器

1.创建格式化数据值的过滤器





  Angluar test
  
  
  


  
    
      Products
      {{products.length}}
    

    
      
        
          NameCategoryExpiryPrice
        
        

          
            
            {{p.name | labelCase}}
            {{p.category | labelCase : true}}
            {{p.expiry}}
            {{p.price | number : 2}}
          
        
      
    
  





var myApp = angular.module("exampleApp", []);

myApp.controller("defaultCtrl", function ($scope) {
  $scope.products = [
    { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
    { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
    { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },

    { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },
    { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },
    { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },

    { name: "Beer", category: "Drinks", price: 2.99, expiry: 365 },
    { name: "Wine", category: "Drinks", price: 8.99, expiry: 365 },
    { name: "Whiskey", category: "Drinks", price: 45.99, expiry: 365 }
  ];
});

自定义过滤器，labelCase反转字符串

// js/createFilters.js文件
angular.module("exampleApp")
  .filter("labelCase", function () {
    return function (value, reverse) {
      if (angular.isString(value)) {
        var inter = reverse ? value.toUpperCase() : value.toLowerCase();
        return (reverse ? inter[0].toLowerCase() : inter[0].toUpperCase()) + inter.substr(1);
      } else {
        return value;
      }
    }
  })

AngularJS怎么使用过滤器

2.创建集合过滤器

在createFilter中定义一个skip过滤函数

angular.module("exampleApp")
  .filter("labelCase", function () {
    return function (value, reverse) {
      if (angular.isString(value)) {
        var inter = reverse ? value.toUpperCase() : value.toLowerCase();
        return (reverse ? inter[0].toLowerCase() : inter[0].toUpperCase()) + inter.substr(1);
      } else {
        return value;
      }
    }
  })
  .filter("skip", function () {
    return function (value, count) {
      if (angular.isArray(value) && angular.isNumber(count)){
        if (count > value.length || count < 0) {
          return value;
        } else {
          // 跳过数组前两项
          return value.slice(count);
        }
      } else {
        return value;
      }
    }
  })

在视图中使用


  
  {{p.name | labelCase}}
  {{p.category | labelCase : true}}
  {{p.expiry}}
  {{p.price | number : 2}}

移除前两项Apples和Bananas，然后显示

AngularJS怎么使用过滤器

3.在已有的过滤器上搭建新的过滤器

在createFilter中添加take过滤器返回，将skip和limitTo两个过滤器方法综合起来

angular.module("exampleApp")
  .filter("labelCase", function () {
    return function (value, reverse) {
      if (angular.isString(value)) {
        var inter = reverse ? value.toUpperCase() : value.toLowerCase();
        return (reverse ? inter[0].toLowerCase() : inter[0].toUpperCase()) + inter.substr(1);
      } else {
        return value;
      }
    }
  })
  .filter("skip", function () {
    return function (value, count) {
      if (angular.isArray(value) && angular.isNumber(count)){
        if (count > value.length || count < 0) {
          return value;
        } else {
          // 跳过数组前两项
          return value.slice(count);
        }
      } else {
        return value;
      }
    }
  })
  // 在已有过滤器的基础上建立新的过滤器
  // 将上述的skip和limit两个过滤器合并
  .filter("take", function ($filter) {
    return function (data, skipCount, limitCount) {
      // 先跳过数组的前skipCount项
      var skipData = $filter("skip")(data, skipCount);
      // 接着只取limitCount行
      return $filter("limitTo")(skipData, limitCount);
    }
  })

在视图中使用：



  {{p.name | labelCase}}
  {{p.category | labelCase : true}}
  {{p.expiry}}
  {{p.price | number : 2}}

先移除两项，然后值取5条数据

AngularJS怎么使用过滤器

感谢各位的阅读！关于“AngularJS怎么使用过滤器”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


本文名称：AngularJS怎么使用过滤器-创新互联
本文地址：http://cdxtjz.cn/article/gddph.html

其他资讯

联系我们

您好HELLO!
感谢您来到成都网站建设公司，若您有合作意向，请您为我们留言或使用以下方式联系我们， 我们将尽快给你回复，并为您提供真诚的设计服务，谢谢。
  • 电话：028- 86922220 18980695689
  • 商务合作邮箱：631063699@qq.com
  • 合作QQ： 532337155
  • 成都网站设计地址：成都市青羊区锣锅巷31号五金站写字楼6楼

小谭建站工作室

成都小谭网站建设公司拥有多年以上互联网从业经验的团队，始终保持务实的风格，以"帮助客户成功"为已任，专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司；我们对营销、技术、管理都有自己独特见解，小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务！

小谭观点

相对传统的成都网站建设公司而言，小谭是互联网中的网站品牌策划，我们精于企业品牌与互联网相结合的整体战略服务。
我们始终认为，网站必须注入企业基因，真正使网站成为企业vi的一部分，让整个网站品牌策划体系变的深入而持久。
友情链接： 网站建设公司   seo网络营销推广   成都微信公众号开发   犀浦防护栏定制   主动防护网   小谭建站   网站运营   成都小程序开发公司   小程序   成都品牌网站设计   
© Copyright 2023 小谭建站工作室All Rights Reserved.  成都网站建设 / 成都网站建设 / 响应式网站建设 / 成都服务器租用