• 不同过滤器的小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笔记------过滤器的更多相关文章

  1. 秒味课堂Angular js笔记------Angular js中的工具方法

    Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...

  2. 秒味课堂Angular js笔记------指令

    1.属性指令 angularjs样式相关指令: ng-class ng-style ng-href ng-src ng-attr-(suffix) ng-bind ng-cloak  没解析完之前标签 ...

  3. 秒味课堂Angular js笔记------$scope.$watch和$scope.$apply

    $scope.$watch(watchFn , watchAction , deepWatch) 其中,watchFn是带有angular表达式或函数字符串: watchAction是一个函数或者表达 ...

  4. Angular JS笔记

    1.引导程序 使用ng-app开始引导一个程序:标记了AngularJS应用的作用域 <!doctype html> <html lang="en" ng-app ...

  5. 【妙味课堂】JS热身课后习题

    <!--*** @Author: wyy* @Date: 2018-04-15 17:36:35* @Email: 2752154874@qq.com* @Last Modified by: w ...

  6. 妙味课堂:JavaScript初级--第11课:字符串、查找高亮显示

    1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...

  7. angularjs学习第二天笔记---过滤器

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...

  8. Angular JS + Express JS入门搭建网站

    3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术.于是周末顺便学习下新技术. 组里产品UI架构如下: 其中前端,主要使用Angular JS框架,另外 ...

  9. Angular JS 学习笔记(自定义服务:factory,Promise 模式异步请求查询:$http,过滤器用法filter,指令:directive)

    刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...

随机推荐

  1. 使用SVN时出现的文件缺失问题

    使用SVN的童鞋们,可能有三种提交代码的方法: 第一种使用客户端(例如SVNX,CornerStone): 第二种使用Xcode提交(Source Control -> commit): 第三种 ...

  2. ZooKeeper 笔记(3) 实战应用之【统一配置管理】

    大型应用通常会按业务拆分成一个个业务子系统,这些大大小小的子应用,往往会使用一些公用的资源,比如:需要文件上传.下载时,各子应用都会访问公用的Ftp服务器.如果把Ftp Server的连接IP.端口号 ...

  3. c语言——gcc,make,vim

    在linux环境下进行c语言编程,基础的工具就是gcc和make.关于这2个工具的内容有很多,现在要做的仅仅是起步. gcc的用法: -S Compile only; do not assemble ...

  4. 向Array中添加选择排序

    选择排序思路 在无序区中选出最小的元素,然后将它和有序区的第一个元素交换位置. 选择排序实现 Function.prototype.method = function(name, func){ thi ...

  5. a标签中使用img后的高度多了4px

    前两天,在做一个网站的时候,发现a标签中使用img后的高度多了4px,各种纠结. 最后,仔细分析,终于找到原因了,因为img是行内元素,默认display: inline; 它与文本的默认行为类似,下 ...

  6. 【转】C#实现二叉查找树

    原文URL: http://www.cnblogs.com/CareySon/archive/2012/04/19/ImpleBinaryTreeWithCSharp.html   简介 树是一种非线 ...

  7. Js动态设置Img大小

    function ResizePic() {        $('img').each(function () {            var maxWidth = 450; // 图片最大宽度   ...

  8. GIS Tools for Hadoop 详细介绍

    2013年Esri美国在开发者大会上演示了GIS数据结合Hadoop分析的一个示例,这个示例赢得了听众的阵阵掌声,我们也许对GIS不是很陌生,但是对Hadoop却不是很清楚,其实Esri是用Java开 ...

  9. Docker 1.13 管理命令

    1.12 CLI 的问题 Docker1.12 命令行接口(CLI)有40多个顶级命令,这些命令存在以下问题: 没有归类组织,这让docker 新手很难学习: 有些命令没有提供足够的上下文环境,以至于 ...

  10. Linux~Sh脚本一点自己的总结

    从.netCore开源项目来看,eShopOnContainers来说,它的部署是跨平台的,可以部署在linux,docker上,在linux上运行它也可以写一些集成的小脚本,这是微信工程师为我们提供 ...