AngularJs学习第八篇 过滤器filter创建


Posted in Javascript onJune 08, 2016

demo

这是整个示例demo

1、filter.js文件

angular.module("exampleApp", [])
.constant("productsUrl", "http://localhost:/products")
.controller("defaultCtrl", function ($scope, $http, productsUrl) {
$http.get(productsUrl).success(function (data) {
$scope.products = data;//直接转成了数组
});
});

这里我把引入的服务作为一个常量,这样写的好处是我便于修改。

对于如何使用$http 服务,请参考我的AngularJs(三) Deployed 使用

<!DOCTYPE html>
<html xmlns="http://www.w.org//xhtml" ng-app="exampleApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-"/>
<title></title>
<script src="angular.js"></script>
<link href="bootstrap-theme.css" rel="stylesheet" />
<link href="bootstrap.css" rel="stylesheet" />
<script src="filter.js"></script>
</head>
<body ng-controller="defaultCtrl" >
<div class="panel">
<div class="panel-heading">
<h class="btn btn-primary">Products</h>
</div>
<div class="panel-body">
<table class="table table-striped table-condensed">
<thead>
<tr>
<td>Name</td><td>Category</td><td>Price</td><td>expiry</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in products">
<td>{{item.name | uppercase}}</td>
<td>{{item.category}}</td>
<td>{{item.price | currency}}</td>
<td>{{item.expiry| number }}</td>
<td>{{item | json}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

运行的结果:

AngularJs学习第八篇 过滤器filter创建

Use filter

过滤器分为两类:

1、对单个数据的过滤

2、对集合进行操作。

一、 对数据进行操作使用比较简单,如demo上所示,在{{item | currency}} 等,就可以进行格式化。

currency:“f" 就可以是价格过滤成英镑。

单个数据的过滤器 想过滤的数据格式,在过滤器后使用 :在相应的格式字符。

number: 表示数据小数位保留位,

二: 集合过滤,从集合中过滤出一定的数量。

在基本demo中我加入这样:

<div class="panel-heading">
<h class="btn btn-primary">Products</h>
</div>
<div class="panel-body">
Limit:<select ng-model="limitValue" ng-options="p for p in limitRange" ></select>
</div> 
filter.js中加入了:
$http.get(productsUrl).success(function (data) {
$scope.products = data;//直接转成了数组
$scope.limitValue = "";//要是字符串
<span style="background-color: rgb(, , );"> $scope.limitRange = [];
for (var i = ; i <= $scope.products.length; i++) {
$scope.limitRange.push(i.toString());
<span style="background-color: rgb(, , );"> }</span></span>
}); 
 <tr ng-repeat="item in products|limitTo:limitValue">
<td>{{item.name | uppercase}}</td>
<td>{{item.category}}</td>
<td>{{item.price | currency}}</td>
<td>{{item.expiry| number }}</td>
<td>{{item | json}}</td>
</tr> 

<span style="line-height: .; font-family: verdana, Arial, Helvetica, sans-serif; font-size: px; background-color: rgb(, , );"> </span>

在写函数必须写在 success中,因为采用异步获取json数据。

结果:

AngularJs学习第八篇 过滤器filter创建

limit :就可以调节在页面显示的个数。

Create filter

AngularJs有两种过滤器,首先我们可以创建对单个数据进行格式的过滤器,比如:输出的字符串首字母大写。

先说如何定义个过滤器: 过滤器是通过module.filter 创建的,创建的一般格式为:

angular.module("exampleApp")//表示获取一个模块。filter是在模块下创建的。

.filter("labelCase", function () { //接收两个参数,第一个参数表示过滤器的名字,第二个是一个工厂函数

return function (value, reverse) { //返回一个工人函数,对坐相应的过滤处理。第一个参数表示需要进行格式的对象,第二个参数表示配置,按照什么格式。

if(angular.isString(value))
{
var intermediate = reverse ? value.toUpperCase() : value.toLowerCase();
return (reverse ? intermediate[].toLowerCase() : intermediate[].toUpperCase() + intermediate.substr());
}else
{
return value;
}
}
});

这个 是我另写到一个js文件中 的。customFilter.js 不要忘记添加。

<link href="bootstrap.css" rel="stylesheet" />
<script src="filter.js"></script>
<script src="customFilter.js"></script>

 好了现在我来更改下数据:

<td>{{item.name | labelCase:true}}</td>

前面讲过如果需要添加配置信息,书写格式是 过滤器 :option

当然默认的参数也可以不写,就会默认给Null值或者undefined。

结果:

自定义一个对各数据处理的过滤器函数就是这么简单。

2、自定义个集合处理的函数,就像limitTo一样。

angular.module("exampleApp")
.filter("labelCase", function () {
return function (value, reverse) {
if (angular.isString(value)) {
var intermediate = reverse ? value.toUpperCase() : value.toLowerCase();
return (reverse ? intermediate[].toLowerCase() : intermediate[].toUpperCase() + intermediate.substr());
} else {
return value;
}
}
})
.filter("skip", function () {
return function(data,count)
{
if (angular.isArray(data) && angular.isNumber(count)) {
if(data.length<count || count<)
{
return data;
}else
{
return data.slice(count);
}
} else {
return data;
}
}
});

html改的部分:

<tr ng-repeat="item in products | skip: ">

结果:总共是六条数据,有使用了skip过滤器给过掉2条。

AngularJs学习第八篇 过滤器filter创建

在自定义过滤器时,发现有个过滤器已经定义了,我不想重复定义,怎么办,我们还可以利用一创建的过滤器进行创建。

angular.module("exampleApp")
.filter("labelCase", function () {
return function (value, reverse) {
if (angular.isString(value)) {
var intermediate = reverse ? value.toUpperCase() : value.toLowerCase();
return (reverse ? intermediate[].toLowerCase() : intermediate[].toUpperCase() + intermediate.substr());
} else {
return value;
}
}
})
.filter("skip", function () {
return function (data, count) {
if (angular.isArray(data) && angular.isNumber(count)) {
if (data.length < count || count < ) {
return data;
} else {
return data.slice(count);
}
} else {
return data;
}
}
})
.filter("take", function ($filter) {//大家可以看到,我在工厂函数引用了AngularJs的内置服务。
return function (data, skipcount, takecount) {//大家看下我这里传了三个参数?
var skipdata = $filter('skip')(data, skipcount);//这种写法大家是否迷糊了呢?函数式编程。
return $filter("limitTo")(skipdata, takecount);//limitTo是内置的过滤器。
}
});

$filter('skip') 调用的是skip过滤器,因为他返回的是一个函数,所以我们能继续传参。

<tr ng-repeat="item in products | take::">

结果:

AngularJs学习第八篇 过滤器filter创建

过滤器就是这样就已经完成了。是不是很简单。

Javascript 相关文章推荐
jQuery获取地址栏参数插件(模仿C#)
Oct 26 Javascript
JS数组去重与取重的示例代码
Jan 24 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
基于jQuery实现简单人工智能聊天室
Feb 10 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 #Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 #Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
Jun 08 #Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 #Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 #Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 #Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 #Javascript
You might like
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
javascript this用法小结
2008/12/19 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
python使用cookie库操保存cookie详解
2014/03/03 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
教师对学生的寄语
2014/04/03 职场文书
个人承诺书格式
2014/06/03 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
实名检举信范文
2015/03/02 职场文书
护士求职自荐信
2015/03/25 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
Python基础之条件语句详解
2021/06/16 Python