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模版引擎中最强大也是最复杂的部分就是 ...
随机推荐
- 利用Dropbox中转自己的C2
利用Dropbox中转自己的C2 0x00 前言 本来的目的呢,是利用dropbox中转自己的c2达到免杀的效果,然后可能是看了文章太久没抓住机会复现,到最后发现已经失效了,会被360拦截,所以好像也 ...
- Nodejs-第一篇(什么是NodeJS)
NodeJS 介绍 Node.js 是什么? 1.Node.js 是一个开发平台,就像Java开发平台..Net开发平台.PHP开发平台.Apple开发平台一样: 什么是开发平台?它们有对应的编程语言 ...
- 20155211 课下测试ch11补做
20155211 课下测试ch11补做 Web服务器的实现基于HTTP协议,有关HTTP协议,下面说法正确的是() A.可以用telnet充当Web服务器的客户端进行调试 B.HTTP请求的GET和P ...
- 20155238 2016-2017-2 《Java程序设计》第一周学习总结
教材内容总结 浏览教材,根据自己的理解每章提出一个问题 1.Java语言跨平台的依据是什么?标准的出现是否会限制JAVA的开发与发展? 2.怎样理解类?PATH对于Java编写的意义是什么? 3.Ja ...
- 【转载】COM 组件设计与应用（十七）——持续性
原文:http://vckbase.com/index.php/wv/1264.html 一.前言 我们写程序,经常需要实现这样的需求: 例一.程序运行产生一个窗口,用户关闭的时候需要记录窗口的位置, ...
- 06 django的用户认证组件
1.用户认证组件 用户认证组件: 功能:用session记录登录验证状态 前提:用户表:django自带的auth_user 创建超级用户: python3 manage.py createsuper ...
- 程序员，Python 这次彻底上位了！
在 2018 年底,我们迎来了编程语言的最后一波洗礼.近期 TIOBE 公布了 12 月编程语言排行榜,前三名变为: Java.C.Python. 而在 PYPL 榜单上 Python 在今年 5 月 ...
- 「功能笔记」Linux常用Shell命令（终端命令）备忘录
长期更新,空置.缺漏的部分会逐渐补上.未指明时,均为GNU版本. 文件命令 基础操作 ls 默认显示非隐藏文件.以文件名进行排序.文件名有颜色(蓝色文件夹.白色一般文件.绿色可执行文件). Cheat ...
- 写个hello world了解Rxjava
目录 什么是Rxjava? 在微服务中的优点 上手使用 引入依赖 浅谈分析Rxjava中的被观察者,观察者 spring boot 项目中使用Rxjava2 什么是Rxjava? 来自百度百科的解释 ...
- Appium知识积累
1.使用uiautomatorviewer 可以直接在命令行输入uiautomatorviewer,打开获取屏幕截图工具,连接手机,打开所要获取包名的应用,然后获取其截图,根据截图查看package即 ...