• 不同过滤器的小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. 简析一下SQL Server里面Fast_Forword 和 SRROLL 的区别

    这次简单说说游标的分类. 先看看通常游标的语法 DECLARE cursor_name CURSOR [ LOCAL :局部游标,仅在当前会话有效 | GLOBAL : 全局游标,全局有效,可以 ] ...

  2. scheme一页纸教程

    这是一个大学教授写的,非常好,原文:http://classes.soe.ucsc.edu/cmps112/Spring03/languages/scheme/SchemeTutorialA.html ...

  3. 出现java.lang.NoSuchFieldException resourceEntries错误的解决方法

    JSP表单里面的表单输入<input type= "text" name="user">这里面的每一个输入都是一个Attribute,相当于setA ...

  4. html列表问题

    HTML无序列表 无序列表是一个项目的列表,此列项目运用粗体圆点(典型的小黑圆圈)进行符号. 无序列表运用 标签 Coffee Milk 浏览器闪现如下: <ul "="&q ...

  5. Spring的AOP基于AspectJ的注解方式开发3

    上上偏博客介绍了@Aspect,@Before 上篇博客介绍了spring的AOP开发的注解通知类型:@Before,@AfterThrowing,@After,@AfterReturning,@Ar ...

  6. 安装SQL Server时,提示VS Shell 安装失败,退出代码为 1638。

    在安装SQL Server时,提示“安装 Microsoft Visual C++ 2015 Redistributable 时出错VS Shell 安装失败,退出代码为 1638”. 原因:是由于你 ...

  7. 给eclipse设置自动补全的步骤

    按照如下步骤:window—>preferences—>java—>editor—>content assist—>然后找到如下图所示的输入框,然后输入如下的字母:.qw ...

  8. MVc Identity登陆锁定

    2016-08-03 [ASP.NET Identity] OAuth Server 鎖定(Lockout)登入失敗次數太多的帳號 743 6 ASP.NET Identity 檢舉文章 2016-0 ...

  9. 一个汇编的HelloWorld!

    花了一下午时间,感觉最坑的是,书写代码的个数和编译器的坑比较多,还各种版本的编译器! 会让人“眼花缭乱”! 主要代码 将文件保存为*.asm include io32.inc .data ;数据 sr ...

  10. 一个n*n 的方格,要从左上角走到右下角,一次只能往右或往下走一步,求算法得出所有走动的方法数。

    题目一:一个n*n 的方格,要从左上角走到右下角,一次只能往右或往下走一步,求算法得出所有走动的方法数. 分析:对于第(i,j)个格子,只有向右走一步到达或者向左走一步到达,dp(i,j) = d(i ...