• 不同过滤器的小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. Asp.net MVC 与 Asp.net Web API 区别

    Asp.Net Web API VS Asp.Net MVC 1.Asp.net MVC 是用来创建返回视图(Views)与数据的Web应用,而Asp.net Web API是一种简单轻松地成熟的HT ...

  2. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  3. 过多if-else分支的优化

    http://www.udpwork.com/item/9294.html 我想谈一谈这个话题是因为我的上一篇博客在ITEye上有一些朋友回复,说if-else过多的分支可以使用switch或者责任链 ...

  4. 『SQL注入』 User-Agent 手工注入的探测与利用分析

    原理很简单:后台在接收UA时没有对UA做过滤,也没有PDO进行数据交互(实际PDO是非常有必要的),导致UA中有恶意代码,最终在数据库中执行. Bug 代码: 本地顺手打了一个环境,Bug 代码部分: ...

  5. C51-keil编译常见错误和警告处理53

    keil错误:C51编译器识别错类型有三种:1.致命错误:伪指令控制行有错,访问不存在的原文:2.语法及语义错误:语法和语义错误都发生在原文件:3.警告:警告出现并不影响目标文件的产生,但执行:C_5 ...

  6. 用于 Visual Studio 和 ASP.NET 的 Web 应用程序项目部署常见问题

    https://msdn.microsoft.com/zh-cn/library/ee942158(v=vs.110).aspx#can_i_exclude_specific_files_or_fol ...

  7. LTE发射机ACLR性能的测量技术

    现代无线服务提供商正致力于不断扩大带宽,为更多用户提供互联网协议(IP)服务.长期演进技术(LTE)是对当前部署的3GPP 网络进行增强并创造更多更重要应用的新一代蜂窝技术.LTE 的体系结构复杂同时 ...

  8. CentOS 7 ARM 版发布：支持树莓派2/香蕉派/CubieTruck

    CentOS 7 ARM 版发布:支持树莓派2/香蕉派/CubieTruck 来自CentOS团队的Karanbir Singh很高兴地宣布,面向ARM硬件架构的CentOS 7 Linux已经正式发 ...

  9. COJN 0575 800601滑雪

    800601滑雪 难度级别:B: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 Michael喜欢滑雪百这并不奇怪, 因为滑雪的确很刺激.可是 ...

  10. Java实现八皇后

    实验题目   回溯法实现8皇后问题 实验要求   a.掌握递归回溯算法的基本思想. b.学习掌握应用面向对象通用回溯程序框架解决实际问题.  提高面向对象编程的技能. 作业描述:在8*8格的棋盘上放置 ...