AngularJS之Filter(二)

前言

本节我们来讲讲AngularJS中主要的部分之一,那就是过滤器,当从后台获取到的数据呈现到视图上时,此时可能需要对数据进行相应的转换,此时我们可以通过过滤器在不同页面进行不同数据的格式抓换,在AngularJS中有常见默认的过滤器,当然若不满足所需,我们可以自定义过滤器。

AngularJS默认过滤器

列举AngularJS中常见的过滤器,如下:

过滤器名称 描述 例子
 currency  money格式化  {{ p.price | currency}}
 date  日期格式化

{ p.orderDate | date : “dd MMM yyyy” }}

{{ p.orderDate | date : “shortDate” }}

 json  将JSON字符串生成一个JSON对象

<tr ng-repeat="p in products">

<td colspan="4">{{p | json}}</td>

</tr>

 number  格式化数值并给出精确度位数

{{ p.price | number : 0}}

{{ p.price | number : 2}}

uppercase

lowercase

 大小写转换

{{ p.city | lowercase }}

{{ p.state | uppercase }}

 limitTo  控制列表渲染数据  <tr ng-repeat="p in products | limitTo:10">
 orderBy  排序

<tr ng-repeat="p in products | orderBy : ‘name’”>

For descending order

<tr ng-repeat="p in products | orderBy : ‘-name’”>

默认过滤器示例

我们渲染一个产品列表并将产品名称转换为大写,产品类别小写,以及数量保留两位小数等。

UI

<body ng-controller="FilterCtrl">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3>
                产品个数
                <span class="label label-primary">{{products.length}}</span>
            </h3>
        </div>
        <div class="panel-body">
            <table class="table table-striped table-bordered table-condensed">
                <thead>
                    <tr>
                        <td>名称</td>
                        <td>类别</td>
                        <td>供给日期</td>
                        <td class="text-right">数量</td>
                        <td class="text-right">价格</td>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="p in products | orderBy :‘name‘">
                        <td>{{p.name | uppercase}}</td>
                        <td>{{p.category | lowercase}}</td>
                        <td>{{getExpiryDate(p.expiry) | date:"dd MMM yy"}}</td>
                        <td class="text-right">{{p.quantity | number:2 }}</td>
                        <td class="text-right">{{p.price | currency}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>  

JS

app.controller(‘FilterCtrl‘, function ($scope) {
    $scope.products = [
                    { name: "Sony LED", category: "TV", price: 40000, quantity:10, expiry: 30 },
                    { name: "Vivo xplay5", category: "Mobile", price: 35640, quantity: 08, expiry: 21 },
                    { name: "LeTv", category: "TV", price: 36000, quantity: 5, expiry: 50 },
                    { name: "Iphone 6 plus", category: "Mobile", price: 55000, quantity: 6, expiry: 60 },
                    { name: "Galaxy s7 edge", category: "Mobile", price: 45000, quantity: 15, expiry: 50 },
    ];  

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

});  

最后生成如下:

自定义过滤器示例

AngularJS不仅仅支持内部自构建的过滤器,而且还可以自定义过滤器来满足我们所需,若自定义过滤器此时我们需要 通过module.filter来实现,实际上内部是通过FilterProvider来实现。module.filter这个方法有两个参数,一个是需要创建的过滤器的名称,另外一个是创建一个factory函数来使得该自定义过滤器生效或者工作。

接下来我们实现一个自定义过滤器,该过滤器带一个参数,实现了再对照代码就明朗了。如下:

app.filter("properCase", function () {
    return function (value, reverse) {
        if (angular.isString(value)) {
            var intermediate = reverse == false ? value.toUpperCase() : value.toLowerCase();
            return (reverse == false ? intermediate[0].toLowerCase() :
            intermediate[0].toUpperCase()) + intermediate.substr(1);
        } else {
            return value;
        }
    };
});  

接下来在视图中将绑定的名称和类别修改成如下:

 <td>{{p.name | properCase}}</td>
 <td>{{p.category | properCase : false}}</td>

结果如下:

混合过滤器示例

当进行渲染数据时,有可能需要进行多次过滤此时我们就需要创建多个自定义过滤器或者内置过滤器和自定义过滤器混合使用。

我们首先对列表通过name来orderby一下,然后通过自定义过滤器移除前两条数据。

app.filter("skipRec", function () {
    return function (data, count) {
        if (angular.isArray(data) && angular.isNumber(count)) {
            if (count > data.length || count < 1) {
                return data;
            } else {
                return data.slice(count);
            }
        } else {
            return data;
        }
    }
});  

此时视图页面循环列表时我们将修改成如下:

 <tr ng-repeat="p in products | orderBy :‘name‘ | skipRec:2">
 .......
 <tr>

最终我们得到的结果如下:

总结

本节我们学习了AngularJS的过滤器,然后对默认过滤器、自定义过滤器以及混合过滤器统一进了相应的示例说明来加深理解,我们下节再见。

时间: 2024-11-05 16:07:20

AngularJS之Filter(二)的相关文章

关于JS中数组splice,concat的用法和AngularJs中filter的补充知识

一 JS数组相关操作 1. splice函数,可做插入,删除,替换操作 1 <script> 2 "use strict" 3 var arr = ['z3']; 4 arr.splice(1,0,'l4'); 5 alert(arr); //z3,l4 6 arr.splice(1,1,'w5'); 7 alert(arr); //z3,w5 8 arr.splice(1,1); 9 alert(arr); //z3 10 arr.splice(10,1,'l4','w5

angularjs之filter过滤器

现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤类常用的filter后面上例子. lowercase(小写) {{ lastName | lowercase }} uppercase(大写) {{ lastName | uppercase }} number(格式化数字) number过滤器可以为一个数字加上千位分割,像这样,123,456,78

AngularJS过滤器filter入门

在开发中,经常会遇到这样的场景 如用户的性别分为“男”和“女”,在数据库中保存的值为1和0,用户在查看自己的性别时后端返回的值自然是1或0,前端要转换为“男”或“女”再显示出来: 如我要换个羽毛球拍,某猫上羽毛球拍的品牌多达数十种,我想单独查看YONEX这个品牌的羽毛球拍: 买完羽毛球拍我还想买一桶羽毛球,点击按销量排序展示商品: 以上三种场景分别对数据进行了转换/筛选/排序,总而言之就是对数据的格式化,AngularJS的filter就是用来做这个事的. 内置过滤器 AngularJS内置了很

关于AngularJs的$filter那点事(菜鸟上路)

现在我们打算用ng的$filter服务来筛选数据 例如现在某后台返回给我们的数据是这样的: $scope.data = { id: "01", maxDisTkts: 0, name: "普通区", seats: [], tickets:[ { price:30, name:"大众单人票", fee:null, favorableFlg:"N", maxTkts:0, marketPriceFlg:"N",

AngularJS 过滤器(Filter) 详解

过滤器(Filter),故名思议,源数据通过特定的规则,转换成需要的数据格式, 这个规则,我们统称为过滤器. AngularJs 的Filter 功能非常强大,并且使用方便.它能够使得页面分组,查询,排序,以及数据转换等操作变的异常简单,同时还可以自定义过滤器实现更复杂的功能. 格式:{{expression | filter}} 或 {{expression | filter1 | filter2 | filter3......}} 或者 {{ expression | filter:argu

angularjs 学习笔记(二) ----- bootstrap框架

1.  下载新的jquery-1.11.1文件. 2.  下载新的bootstrap文件. 3.  选择流式布局的模板填充入index.html文件. 4.  将top.foot转为nginclude文件 nginclude必须使用$scope对象,因此需要设置一个全局的mainctrl来将字符串或全局变量注入$cope中. $rootScope.global =global; 直接将全局变量global赋值给$rootScope,并且之后的子$Scope会获得继承,静态定义与ctrl分开. 5

AngularJS学习笔记(二) 表单验证案例(ng-repeat/filter)

这一节相对来说需要理解的东西不是太多,记住了那些api就行了. 还是一个案例(同样来自miaov),一个表单验证,先上代码,然后再对对应的内容进行解释. <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> </head>

AngularJS的Filter用法详解

Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式): {{ expression | filter }} Filter可以被链式使用(即连续使用多个filter): {{ expression | filter1 | filter2 | ... }} Filter也可以指定多个参数: {{ expression | filter:argument1:argument2:... }} AngularJS内建的Filter Angu

转:AngularJS的Filter用法详解

Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式): {{ expression | filter }} Filter可以被链式使用(即连续使用多个filter): {{ expression | filter1 | filter2 | ... }} Filter也可以指定多个参数: {{ expression | filter:argument1:argument2:... }} AngularJS内建的Filter Angu