AngularJS 霸道的过滤器小结

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

一、为什么使用过滤器？

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

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

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

二、过滤单个数据的值

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

这里写图片描述

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

Angluar test <Meta charset="utf-8"/>
NameCategoryExpiryPrice

<script type="text/javascript" src="js/angular.min.js">
<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",price: 2.42,expiry: 7 },{ name: "Pears",price: 2.02,expiry: 6 },{ name: "Tuna",category: "Fish",price: 20.45,expiry: 3 },{ name: "Salmon",price: 17.93,expiry: 2 },{ name: "Trout",price: 12.93,expiry: 4 },{ name: "Beer",category: "Drinks",price: 2.99,expiry: 365 },{ name: "Wine",price: 8.99,{ name: "Whiskey",price: 45.99,expiry: 365 }
];
})

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

这里写图片描述

1.格式化货币值

这里写图片描述

2.格式化数字值

这里写图片描述

3.格式化日期

添加 $scope.getExpiryDate = function (days) { var now = new Date(); return now.setDate(now.getDate() + days); }

这里写图片描述

4.改变字符串大小写

这里写图片描述

5.生成JSON

这里写图片描述

6.本地化过滤器输出

需要移入本地化JS文件

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

这里写图片描述

2.选取项—filter过滤器

Angluar test <Meta charset="utf-8"/> 
<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'的行

这里写图片描述

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

Angluar test <Meta charset="utf-8"/> 
<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>

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

<script type="text/javascript" src="js/angular-locale_zh-cn.js">
<script type="text/javascript">
var myApp = angular.module("exampleApp",expiry: 365 }
];
// 自定义函数排序
$scope.customOrder = function (item) {
// 保质期<5的不排序，其他的按照价格升序排序
return item.expiry < 5 ? 0 : item.price;
}
})

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

这里写图片描述

四、链式过滤器

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

Angluar test <Meta charset="utf-8"/> 
<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>

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

<script type="text/javascript" src="js/angular-locale_zh-cn.js">

<script type="text/javascript">

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条数据

这里写图片描述

五、自定义过滤器

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

Angluar test <Meta charset="utf-8"/> 
<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>

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

<script type="text/javascript">

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

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
搞懂js中小数运算精度问题原因及解决办法
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
前端对base64编码的理解，原生js实现字符base64编码
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
js判断浏览器是否支持webGL
起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
js判断undefined和null
js判断undefined js判断null js判断null和undefined
将文字自动转为banner打印形式的工具
http://patorjk.com/software/taag/
聊一聊 bootstrap 的轮播图插件
今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
js实现图片无缝循环跑马灯
html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作