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 相关文章推荐
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
Node.js事件驱动
Jun 18 Javascript
浅谈Javascript线程及定时机制
Jul 02 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
javascript动态生成树形菜单的方法
Nov 14 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
JS前端模块化原理与实现方法详解
Mar 17 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 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
我的论坛源代码(九)
2006/10/09 PHP
php 接口类与抽象类的实际作用
2009/11/26 PHP
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
Javascript之文件操作
2007/03/07 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
2014/08/07 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
python计算最大优先级队列实例
2013/12/18 Python
python遍历数组的方法小结
2015/04/30 Python
Python和C/C++交互的几种方法总结
2017/05/11 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
Python实现快速计算词频功能示例
2018/06/25 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
Python实现AI换脸功能
2020/04/10 Python
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
四川成都导游欢迎词
2014/01/18 职场文书
秋季运动会活动方案
2014/02/05 职场文书
小溪流的歌教学反思
2014/02/13 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
大学生读书笔记大全
2015/07/01 职场文书
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android