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模版引擎中最强大也是最复杂的部分就是 ...
随机推荐
- 【翻译】R 中的设计模式
目录 R 中的设计模式 不动点算法 包装器模式 接口模式 柯里化(Currying) 闭包(Closures) 缓存模式 计数器模式 R 中的设计模式 本文翻译自 Design Patterns in ...
- 3 huigu
w +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 组件复用 --------------- ...
- #6435. 「PKUSC2018」星际穿越
考场上写出了70分,现在填个坑 比较好写的70分是这样的:(我考场上写的贼复杂) 设\(L(i)=\min_{j=i}^nl(j)\) 那么从i开始向左走第一步能到达的就是\([l(i),i-1]\) ...
- 彻底搞清楚python字符编码
在讨论python编码之前,我先了解了几种编码的由来. 一.编码类型 1.ascci码 ascci码由美国人发明,用1个字节(byte)存储英文和字符,前期用了128个,后来新加了其他欧洲国家的符号, ...
- RegExp正则匹配模式汇总
正则表达式提供另一种强大的文本搜索和处理方式,对于正则表达式,不同语言有着不同的实现,JavaScript采用的Perl5的语法.对于极少数匹配模式是简单的全字符文本的情况,我们往往会采用indexO ...
- 第一道防线__SpringMVC配置拦截器
这几天在公司自己开发一个小系统,但是系统的安全性也得考虑,起初没注意,赶急就光关心业务逻辑和实现效果.最后老大一出手,就把最严重的问题指出来了,他说你这根本没安全性可言,于是我试着将公司使用的spri ...
- tikz中谐振子（弹簧）的绘制，以及声子色散关系的绘制
今天整理了简正模导出声子的内容,其中用tikz画了两张图.一张是整个问题的物理模型,效果如下 这幅图的绘制参考了https://tex.stackexchange.com/questions/4160 ...
- Jmeter+ant+jenkins接口自动化测试 平台搭建（三）
四.报告优化 Jmeter 默认生成报告不是很详细,因此我们需要进行优化.这里我们使用新的报告模板:默认的报告模板是 jmeter-results-detail-report_21.xsl 先上效果图 ...
- 【python 3.6】类：访问属性及调用方法
>>> class price(): //定义1个类,用于计算价格 def __init__(self,name,danjia): //初始化方法,定义商品名称和单价 self.na ...
- 【Docker】第五篇 Docker 数据管理
一.基本介绍 数据管理的原因:Docker中的容器一旦删除,容器本身的rootfs文件系统就会被删除,容器中的所有数据就会被删除.为了对一些需要持久化的数据,不随容器删除而删除,所以我们可以通过多个容 ...