欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

AngularJS 霸道的过滤器小结

程序员文章站 2022-06-03 12:31:15
一、为什么使用过滤器？ 在实际操作中，我们需要对统一数据源进行多次转换，比如我的货币单位，在不同的国家我们将用不同的符号表示。因此，你可能会想到在控制器中判断国家以...

一、为什么使用过滤器？

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

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

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

二、过滤单个数据的值

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

AngularJS 霸道的过滤器小结 

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

<!doctype>
<!-- use module -->
<html ng-app="exampleapp">
<head>
  <title>angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
  <dlv class="panel panel-default" ng-controller="defaultctrl">
    <div class="panel panel-header">
      products
      <span class="label label-primary">{{products.length}}</span>
    </div>
    <div class="panel panel-body">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr><th>name</th><th>category</th><th>expiry</th><th>price</th></tr>
        </thead>
        <tbody>
          <tr ng-repeat="p in products">
            <td>{{p.name}}</td>
            <td>{{p.category}}</td>
            <td>{{p.expiry}}</td>
            <td>{{p.price}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
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 }
  ];
})
</script>
</body>
</html>

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

AngularJS 霸道的过滤器小结

1.格式化货币值

<tr ng-repeat="p in products">
  <td>{{p.name}}</td>
  <td>{{p.category}}</td>
  <td>{{p.expiry}}</td>
  <!-- 使用currency -->
  <td>{{p.price | currency}}</td>
</tr>

AngularJS 霸道的过滤器小结

2.格式化数字值

<tr ng-repeat="p in products">
  <td>{{p.name}}</td>
  <td>{{p.category}}</td>
  <td>{{p.expiry}}</td>
  <!-- 保留小数点后3位 -->
  <td>{{p.price | number : 3}}</td>
</tr>

AngularJS 霸道的过滤器小结

3.格式化日期

// 在控制器中添加
$scope.getexpirydate = function (days) {
  var now = new date();
  return now.setdate(now.getdate() + days);
}
<tr ng-repeat="p in products">
  <td>{{p.name}}</td>
  <td>{{p.category}}</td>
  <!-- 在视图中使用-->
  <td>{{getexpirydate(p.expiry) | date : 'yyyy/mm/dd'}}</td>
  <!-- 货币单位本地化 -->
  <td>{{p.price}}</td>
</tr>

AngularJS 霸道的过滤器小结

4.改变字符串大小写

<tr ng-repeat="p in products">
  <!-- 字母大小写 -->
  <td>{{p.name | uppercase}}</td>
  <td>{{p.category | lowercase}}</td>
  <td>{{getexpirydate(p.expiry) | date : 'yyyy/mm/dd'}}</td>
  <!-- 货币单位本地化 -->
  <td>{{p.price}}</td>
</tr>

AngularJS 霸道的过滤器小结

5.生成json

<tr ng-repeat="p in products">
  <!-- 生成json数据 -->
  <td>{{p.name | json}}</td>
  <td>{{p.category}}</td>
  <td>{{getexpirydate(p.expiry) | date : 'yyyy/mm/dd'}}</td>
  <!-- 货币单位本地化 -->
  <td>{{p.price}}</td>
</tr>

AngularJS 霸道的过滤器小结

6.本地化过滤器输出

需要移入本地化js文件

<!-- 引入本地化文件 -->
<script type="text/javascript" src="js/angular-locale_zh-cn.js"></script>
<tr ng-repeat="p in products">
  <td>{{p.name}}</td>
  <td>{{p.category}}</td>
  <td>{{p.expiry}}</td>
  <!-- 货币单位本地化 -->
  <td>{{p.price | currency}}</td>
</tr>

AngularJS 霸道的过滤器小结

三、过滤集合

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

<!doctype>
<!-- use module -->
<html ng-app="exampleapp">
<head>
  <title>angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
  <dlv class="panel panel-default" ng-controller="defaultctrl">
    <div class="panel panel-header">
      products
      <span class="label label-primary">{{products.length}}</span>
    </div>
    <div class="panel panel-body">
      limit: <select ng-model="limitval" ng-options="item for item in limitrange"></select>
    </div>
    <div class="panel panel-body">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr><th>name</th><th>category</th><th>expiry</th><th>price</th></tr>
        </thead>
        <tbody>
          <!-- 只显示limitval行 -->
          <tr ng-repeat="p in products | limitto : limitval">
            <td>{{p.name}}</td>
            <td>{{p.category}}</td>
            <td>{{p.expiry}}</td>
            <td>{{p.price | number : 2}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </dlv>
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入本地化文件 -->
<script type="text/javascript" src="js/angular-locale_zh-cn.js"></script>
<script type="text/javascript">
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());
  }
})
</script>
</body>
</html>

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

AngularJS 霸道的过滤器小结

2.选取项—filter过滤器

<!doctype>
<!-- use module -->
<html ng-app="exampleapp">
<head>
  <title>angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
  <dlv class="panel panel-default" ng-controller="defaultctrl">
    <div class="panel panel-header">
      products
      <span class="label label-primary">{{products.length}}</span>
    </div>

    <div class="panel panel-body">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr><th>name</th><th>category</th><th>expiry</th><th>price</th></tr>
        </thead>
        <tbody>
          <!-- 自定义过滤 -->
          <tr ng-repeat="p in products | filter : selectitems">
            <td>{{p.name}}</td>
            <td>{{p.category}}</td>
            <td>{{p.expiry}}</td>
            <td>{{p.price | number : 2}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </dlv>
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入本地化文件 -->
<script type="text/javascript" src="js/angular-locale_zh-cn.js"></script>
<script type="text/javascript">
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';
  }

})
</script>
</body>
</html>

仅仅保留类别为fish或者name=='beer'的行

AngularJS 霸道的过滤器小结

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

<!doctype>
<!-- use module -->
<html ng-app="exampleapp">
<head>
  <title>angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
  <dlv class="panel panel-default" ng-controller="defaultctrl">
    <div class="panel panel-header">
      products
      <span class="label label-primary">{{products.length}}</span>
    </div>

    <div class="panel panel-body">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr><th>name</th><th>category</th><th>expiry</th><th>price</th></tr>
        </thead>
        <tbody>
          <!-- 通过价格按照升序排列 -->
          <!-- <tr ng-repeat="p in products | orderby : 'price'"> -->
          <!-- price前加-表示按照降序排列 -->
          <!-- <tr ng-repeat="p in products | orderby : '-price'"> -->
          <!-- 自定义排序 -->
          <!-- <tr ng-repeat="p in products | orderby : customorder"> -->
          <!-- 组合排序，保质期<5的降序排列，其他的按照价格升序排序 -->
          <tr ng-repeat="p in products | orderby : [customorder, '-price']">
            <td>{{p.name}}</td>
            <td>{{p.category}}</td>
            <td>{{p.expiry}}</td>
            <td>{{p.price | number : 2}}</td>

          </tr>
        </tbody>
      </table>
    </div>
  </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入本地化文件 -->
<script type="text/javascript" src="js/angular-locale_zh-cn.js"></script>
<script type="text/javascript">
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;
  }
})
</script>
</body>
</html>

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

AngularJS 霸道的过滤器小结 

四、链式过滤器

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

<!doctype>
<!-- use module -->
<html ng-app="exampleapp">
<head>
  <title>angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
  <dlv class="panel panel-default" ng-controller="defaultctrl">
    <div class="panel panel-header">
      products
      <span class="label label-primary">{{products.length}}</span>
    </div>

    <div class="panel panel-body">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr><th>name</th><th>category</th><th>expiry</th><th>price</th></tr>
        </thead>
        <tbody>
          <!-- 过滤链条，通过orderby和limitto共同作用 -->
          <tr ng-repeat="p in products | orderby : [customorder, '-price'] | limitto : 5">
            <td>{{p.name}}</td>
            <td>{{p.category}}</td>
            <td>{{p.expiry}}</td>
            <td>{{p.price | number : 2}}</td>

          </tr>
        </tbody>
      </table>
    </div>
  </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入本地化文件 -->
<script type="text/javascript" src="js/angular-locale_zh-cn.js"></script>

<script type="text/javascript">

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

})
</script>
</body>
</html>

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

<tr ng-repeat="p in products | orderby : [customorder, '-price'] | limitto : 5">

AngularJS 霸道的过滤器小结

五、自定义过滤器

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

<!doctype>
<!-- use module -->
<html ng-app="exampleapp">
<head>
  <title>angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
  <dlv class="panel panel-default" ng-controller="defaultctrl">
    <div class="panel panel-header">
      products
      <span class="label label-primary">{{products.length}}</span>
    </div>

    <div class="panel panel-body">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr><th>name</th><th>category</th><th>expiry</th><th>price</th></tr>
        </thead>
        <tbody>

          <tr ng-repeat="p in products">
            <!-- 使用自定义过滤器 -->
            <td>{{p.name | labelcase}}</td>
            <td>{{p.category | labelcase : true}}</td>
            <td>{{p.expiry}}</td>
            <td>{{p.price | number : 2}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>

<script type="text/javascript">

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 }
  ];
});
</script>
<!-- 引入自定义的过滤器 -->
<script type="text/javascript" src="js/createfilters.js"></script>
</body>
</html>

自定义过滤器，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;
      }
    }
  })

在视图中使用

<tr ng-repeat="p in products | skip : 2">
  <!-- 使用自定义过滤器 -->
  <td>{{p.name | labelcase}}</td>
  <td>{{p.category | labelcase : true}}</td>
  <td>{{p.expiry}}</td>
  <td>{{p.price | number : 2}}</td>
</tr>

移除前两项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);
    }
  })

在视图中使用：

<tr ng-repeat="p in products | take : 2 : 5">
<!-- 使用自定义过滤器 -->
  <td>{{p.name | labelcase}}</td>
  <td>{{p.category | labelcase : true}}</td>
  <td>{{p.expiry}}</td>
  <td>{{p.price | number : 2}}</td>
</tr>

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

AngularJS 霸道的过滤器小结

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： 详解Angular 4.x Injector

下一篇： 寿司饭怎么煮？看完你就全明白啦

推荐阅读