秒味课堂Angular js笔记------过滤器
- 不同过滤器的小demo。
currency
number
uppercase
json
limitTo
date
orderBy
filter
<script>
var filterMy = angular.module("fliterMy",[]);
filterMy. controller("filter", ["$scope",function($scope)
$scope.name = "345343";
$scope.str = "hello";
$scope.jsonTest = {"name" : "Gary" , "age" , 10};
$scope.numbers = [
{"color":"red","age":"20"},
{"color":"yellow","age":"30"},
{"color":"blue","age":"40"},
{"color":"green","age":"50"}
]
])
</script>
<body>
<div ng-controller = "filter">
<p>{{name | curency:"￥"}}</p> //￥345,343.00
<p>{{name | number}}</p> //345,343当有小数时候，默认保留3位，number:2保留两位小数；
<p>{{str | uppercase}}</p> //HELLO
<pre>{{jsonTest | json}}</pre> //将json格式化成标准格式
<p>{{str | limitTo : 3}}</p> // hel 同时，limitTo 也可以支持数组的截取
<p>{{name | date}}</p> //将毫秒数输出日期格式，参数可以有很多，输出不同的日期格式
<p>{{numbers | orderBy : 'color' :true}}</p> //按照color排序,true代表是降序
<p>{{numbers | filter : '40'}}</p> //匹配数组中存在40所在项，filters :'l':true 完全匹配
</div>
</body>
- 过滤器扩展-组合使用
过滤器可以组合使用，通过多个 | 符号，比如：
<p>{{str | limitTo : 3 | uppercase}}</p> //取前3位，并且变成大写
- js中使用过滤器$filter
<script>
var filterMy = angular.module("fliterMy",[]);
filterMy. controller("filter", ["$scope","$fliter",function($scope,$filter)
$scope.name = $filter('number')('345343'); ])
</script>
<body>
<div ng-controller = "filter">
<p>{{name}}</p> //￥345,343.00 </div>
</body>
- 自定义过滤器
<script>
var filterMy = angular.module("fliterMy",[]);
filterMy.filter('firstUpper',function(){
return function(str){
return str.charAt(0).toUppercase() +str.substring(1);
}
})
filterMy.controller("filter", ["$scope",function($scope)
$scope.str = "hello";
])
</script>
<body>
<div ng-controller = "filter">
<p>{{name | firstUpper}}</p>
</div>
</body>
- js中使用自定义过滤器
<script>
var filterMy = angular.module("fliterMy",[]);
filterMy.filter('firstUpper',function(){
return function(str){
return str.charAt(0).toUppercase() +str.substring(1);
}
})
filterMy.controller("filter",["$scope","$filter",function($scope,$filter)
$scope.name = $filter('firstUpper')('hello');//js中使用过滤器
])
</script>
<body>
<div ng-controller = "filter">
<p>{{name}}</p>
</div>
</body>
秒味课堂Angular js笔记------过滤器的更多相关文章
- 秒味课堂Angular js笔记------Angular js中的工具方法
Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...
- 秒味课堂Angular js笔记------指令
1.属性指令 angularjs样式相关指令: ng-class ng-style ng-href ng-src ng-attr-(suffix) ng-bind ng-cloak 没解析完之前标签 ...
- 秒味课堂Angular js笔记------$scope.$watch和$scope.$apply
$scope.$watch(watchFn , watchAction , deepWatch) 其中,watchFn是带有angular表达式或函数字符串: watchAction是一个函数或者表达 ...
- Angular JS笔记
1.引导程序 使用ng-app开始引导一个程序:标记了AngularJS应用的作用域 <!doctype html> <html lang="en" ng-app ...
- 【妙味课堂】JS热身课后习题
<!--*** @Author: wyy* @Date: 2018-04-15 17:36:35* @Email: 2752154874@qq.com* @Last Modified by: w ...
- 妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示
1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...
- angularjs学习第二天笔记---过滤器
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- Angular JS + Express JS入门搭建网站
3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术.于是周末顺便学习下新技术. 组里产品UI架构如下: 其中前端,主要使用Angular JS框架,另外 ...
- Angular JS 学习笔记(自定义服务：factory，Promise 模式异步请求查询:$http,过滤器用法filter，指令:directive)
刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...
随机推荐
- Android学习-----Button点击事件几种写法
Button点击事件:大概可以分为以下几种: 匿名内部类 定义内部类,实现OnClickListener接口 定义的构造方法 用Activity实现OnClickListener接口 指定Button ...
- git branch分支管理用法总结
查看分支(远程和本地) 1 查看本地分支: $ git branch 2 查看远程分支: $ git branch -r 3.查看本地和远程分支 $ git branch -a 创建分支 1.创建本地 ...
- jquery easy ui 学习 （1）Basic Window
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- S5PV210启动过程分析
一.三星官方推荐方式 1.数据手册<S5PV210_iROM_Application_note>中截取:
- Codeforces 301_div.2_Ice Cave（BFS走冰块）
Ice Cave Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Descripti ...
- The formatter threw an exception while trying to deserialize the message in WCF
有一个WCF应用, 主要功能是存储doc, txt等类型文件到database,当文件的大小在16kb之内,调用WCF service能正常工作:但如果文件大小超出16KB之外, 它将抛出这样一个错误 ...
- JMS集群部署问题 java.net.ConnectException: Connection refused; No available router to destination
1:本地spring配置如下 <!-- JndiTemplate --> <bean id="jndiTpl" class="org.springfra ...
- h.264全搜索以及快速全搜索算法
Full Search 全搜索算法是最简单暴力的一种搜索算法,对搜索范围内的所有像素点都进行匹配对比,选出最合适的运动向量,以下就是一个搜索范围为4的全搜索范围(单个像素点) /*! ******** ...
- 通过示波器分析TypeB卡通讯数据
这几天,使用NFC芯片模拟了一张TypeB的cpu卡,在调试过程中,因为要检查射频性能,所以用示波器抓取了RFID读卡器和TypeB CPU卡之间的通讯数据.READER发送的数据位106K ASK调 ...
- BZOJ 1003 [ZJOI2006]物流运输trans
1003: [ZJOI2006]物流运输trans Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 4242 Solved: 1765[Submit] ...