angularJS1笔记-(6)-自定义过滤器
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div ng-app="myApp">
<div ng-controller="firstController">
<ul>
<!--这里用到了自定义的过滤器filterAge-->
<li ng-repeat="user in data | filterAge">
{{user.name}}
{{user.age}}
{{user.city}}
</li>
</ul>
</div>
</div> <script type="text/javascript" src="../../vendor/angular/angularJs.js"></script>
<script type="text/javascript" src="app/index.js"></script> <script>
</script> </body>
</html>
js:
angular.module('myApp', [], function ($filterProvider, $provide, $controllerProvider) {
//注册service
$provide.service('Data', function () {
return [
{
name: "张三1",
age: 21,
city: "北京"
},
{
name: "张三2",
age: 22,
city: "北京"
},
{
name: "张三3",
age: 23,
city: "上海"
},
{
name: "张三4",
age: 24,
city: "北京"
},
];
});
//注册filter
$filterProvider.register('filterAge', function () {
return function (obj) {
var newObj = [];
angular.forEach(obj,function (o) {
//过滤出年龄大于22岁的
if(o.age>22){
newObj.push(o);
}
});
return newObj;
};
});
//注册controller
$controllerProvider.register('firstController', function ($scope, Data) {
$scope.data = Data;
});
});
运行结果：
补充:传多个参数的过滤器
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义过滤器复习</title>
<script type="text/javascript" src="../../vendor/angular/angularJs.js"></script>
</head>
<body ng-app="app">
<div>
<!--过滤器的参数就是前面穿进去的参数-->
<h1>{{ true | checkmark }}</h1>
<h1>{{ false | checkmark }}</h1>
<input type="text" placeholder="请输入你的体重" ng-model="yourWeight">
<h2>体重:{{yourWeight}}kg</h2>
<!--过滤器如果要传入第二个参数就在过滤器后面加一个:-->
<h2>评测:{{yourWeight|weightFilter:"张三"}}</h2>
</div>
<script>
angular.module('app', [])
.filter('checkmark', function () {
return function (input) {
return input ? '\u2713' : '\u2718';
}
})
.filter('weightFilter', function () {
return function (input,inputTwo) {
if (input < 50) {
return inputTwo + "偏瘦";
} else if (input >= 100) {
return inputTwo + "偏胖";
} else {
return inputTwo + "正常";
}
}
})
</script>
</body>
</html>
执行结果:
angularJS1笔记-(6)-自定义过滤器的更多相关文章
- angularJS1笔记-(11)-自定义指令(transclude/priority/terminal)
自定义指令的属性 transclude:为true时,允许把html中新定义的指令中原来的dom运用到该指令的template中. 属性priority,设置该指令的优先级,优先级大的先执行,默认指令 ...
- angularJS1笔记-(4)-自定义服务
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- angularJS1笔记-(15)-自定义指令(accordion伸缩菜单原始实现)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angularJS1笔记-(14)-自定义指令(scope)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angularJS1笔记-(13)-自定义指令(controller和controllerAs实现通信)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angularJS1笔记-(12)-自定义指令(compile/link)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angularJS1笔记-(10)-自定义指令(templateUrl属性)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angularJS1笔记-(9)-自定义指令(restrict/template/replace)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- Django 笔记（四）模板标签 ~ 自定义过滤器
模板标签: 标签在渲染的过程中提供任意的逻辑 语法: 由{% ... %} 和 {% end... %} 常用标签: with:类似取别名 模版继承: Django模版引擎中最强大也是最复杂的部分就是 ...
随机推荐
- 4.Operators-操作符(Dart中文文档)
Dart有如下操作符: Description Operator unary postfix expr++ expr-- () [] . ?. unary prefix -expr !expr ~ex ...
- 【转】JavaScript操作SVG的一些知识
原文:http://blog.iderzheng.com/something-about-svg-with-javascript/ 前阵子学习了一下SVG(Scalable Vector Graphi ...
- 二级管工作原理（PN结原理）学习
0.小叙闲言 前面已经写了两篇介绍放大器应用和MOSFET作驱动的文章:常规放大电路和差分放大电路和MOSFET使用与H桥驱动问题.但是对它们的工作原理并没有进一步研究一下,今天写下这篇文章,主要是介 ...
- Velocity学习4
Velocity是一个基于java的模板引擎(template engine).它允许任何人仅仅简单的使用模板语言(template language)来引用由java代码定义的对象. 当Veloci ...
- Velocity学习2
Velocity是一个基于java的模板引擎(template engine).它允许任何人仅仅简单的使用模板语言(template language)来引用由java代码定义的对象. 当Veloci ...
- 4543: [POI2014]Hotel加强版
4543: [POI2014]Hotel加强版 链接 分析: f[u][i]表示子树u内,距离u为i的点的个数,g[u][i]表示在子树u内,已经选了两个深度一样的点,还需要在距离u为i的一个点作为第 ...
- P4198 楼房重建
P4198 楼房重建 集中写博客= = 首先把高度变成斜率 然后就比较玄学了,首先用线段树维护一个区间的斜率最大值,和只看这个区间时能看见的楼房个数ans 然后更新时先更新max,再处理神奇的ans ...
- Win7搭建FTP服务器
“控制面板” -> “程序和功能” -> “打开或关闭Windows 功能”: 1.展开“Internet 信息服务” 2.勾选“Internet Information Services ...
- jmeter☞工作区介绍（三）
基于jmeter4.0,jdk1.8 目录树:存放设计过程中使用的元件.执行过程中默认是从根节点开始顺序遍历元件.比如说HTTP请求的取样器就是元件,组件就是一个或多个元件的集合. 测试计划编辑区域: ...
- 求二维数组最大子数组的和。郭林林&胡潇丹
求二维数组子数组的最大值,开始思路不太清晰.先从最简单的开始. 以2*2的简单数组为例找规律, 假设最大数为a[0][0],则summax=a[0][0],比较a[0][0]+a[0][1].a[0] ...