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模版引擎中最强大也是最复杂的部分就是 ...
随机推荐
- 从0开始学golang--1--部署本地服务器
部署自己的本地服务器. 找了个三方包项目:beego.看了下还不错. 上代码....: 首先直接安装三方包,CMD下:go get github.com/astaxie/beego 安装成功后会在pk ...
- 用EXCEL的VBA将PHPCMS的备份文件转换成HTML的一次尝试
背景 有个PHPCMS的网站停了,但是网站的历史文章又想要看看,网站停了以后,管理员发来了网站的所有数据. 分析 因为不会PHP,所有本地环境跑网站不优先考虑. 有MySQL数据库文件,但是不熟悉My ...
- Dataguard学习笔记
主库和备库之间的redo log传递,可以通过如下方式实现: 在主库端: log_archive_dest_1='主库本地路径' log_archive_dest_2='备库的net service名 ...
- SQL Server 跨库查询
1. 开启Ad Hoc Distributed Queries组件,在sql查询编辑器中执行如下语句: reconfigure reconfigure 2. 跨库查询操作 select * from ...
- wpf 中Listbox获取选中的值
布局代码: <ListBox Name="listBox1" Width="120" Height="52" SelectionC ...
- P3877 [TJOI2010]打扫房间
xswl以为是个插头dp,然后发现就是个sb题 相当于就是个匹配.每个格子度数为2,所以可以匹配2个相邻的点.匹配显然的用网络流.最后check有没有不匹配的点即可. #include<bits ...
- sublime常用方法
1.如何打开一个文件夹? project----->Add Folder to Project 2.如何同一个窗口下进行分屏操作? 使用快捷键:shift+Alt+2 3.如何使html代码进行 ...
- ATmega8仿真——键盘扫描的学习
1.按键的使用特点 按键的应用主要是在按键闭合时改变电路的电平,但是一般情况下按键的开关都是机械弹性触点开关,即利用触点的接触和分离来实现电路的通断,所以在按键按下和释放时往往会产生抖动干扰. 消除抖 ...
- C++默认成员函数
1.什么是面向对象? 概念:(Object Oriented Programming,缩写:OOP)是一种程序设计范型,同时也是一种程序开发的方法. 对象指的是类的实例,将对象作为程序的基本单元,将程 ...
- 使用Fiddler进行Web接口测试
一.Fiddler简介1.为什么是Fiddler?抓包工具有很多,小到最常用的web调试工具firebug,达到通用的强大的抓包工具wireshark.为什么使用fiddler?原因如下: A)Fir ...