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}}

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'; } })

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; } })

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; } })

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 } ]; });

// 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; } } })

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); } })

重庆分公司，新征程启航

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

其他资讯