分类导航

JavaScript 发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了AngularJS 霸道的过滤器小结，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

一、为什么使用过滤器？

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

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

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

二、过滤单个数据的值

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

AngularJS 霸道的过滤器小结

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

Angluar test

NameCategoryExpiryPrice

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

AngularJS 霸道的过滤器小结

1.格式化货币值

AngularJS 霸道的过滤器小结

2.格式化数字值

AngularJS 霸道的过滤器小结

3.格式化日期

AngularJS 霸道的过滤器小结

4.改变字符串大小写

AngularJS 霸道的过滤器小结

5.生成JSON

AngularJS 霸道的过滤器小结

6.本地化过滤器输出

需要移入本地化JS文件

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

AngularJS 霸道的过滤器小结

2.选取项—filter过滤器

Angluar test

<div class="panel panel-body"&gt;
  <table class="table table-striped table-bordered table-hover"&gt;
    <thead>
      <tr&gt;<th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr&gt;
    </thead>
    <tbody>
      <!-- 自定义过滤 -->
      <tr ng-repeat="p in products | filter : selectItems"&gt;
        <td&gt;{{p.name}}</td&gt;
        <td&gt;{{p.category}}</td&gt;
        <td&gt;{{p.expiry}}</td&gt;
        <td&gt;{{p.price | number : 2}}</td&gt;
      </tr&gt;
    </tbody>
  </table&gt;
</div>

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

AngularJS 霸道的过滤器小结

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

Angluar test

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

      </tr&gt;
    </tbody>
  </table&gt;
</div>

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

AngularJS 霸道的过滤器小结

四、链式过滤器

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

Angluar test

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

      </tr&gt;
    </tbody>
  </table&gt;
</div>

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

myApp.controller("defaultCtrl",expiry: 365 }
];
// 自定义函数排序
$scope.customOrder = function (item) {
// 保质期<5的不排序，其他的按照价格升序排序
return item.expiry < 5 ? 0 : item.price;
}

})

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

AngularJS 霸道的过滤器小结

五、自定义过滤器

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

Angluar test

<div class="panel panel-body"&gt;
  <table class="table table-striped table-bordered table-hover"&gt;
    <thead>
      <tr&gt;<th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr&gt;
    </thead>
    <tbody>

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

var myApp = angular.module("exampleApp",expiry: 365 }
];
});