• 不同过滤器的小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. Phalcon 的 bootstrap.php 自动加载完成；非常人性化的设计

    <?php /** * Bootstraps the application */ use Phalcon\DI\FactoryDefault as PhDi, Phalcon\Config a ...

  2. Delphi-Delete 过程

    过程名称 Delete 所在单元 System 过程原型 procedure Delete ( var Source : string; StartChar : Integer; Count : In ...

  3. SQL语句宝典

    1.前述: 将数据灵活运用于手掌心! link:1.经典SQL语句大全(cnblogs) 2.SQL教程(W3C)

  4. ASP.NET MVC的Action Filter

    一年前写了一篇短文ASP.NET MVC Action Filters,整理了Action Filter方面的资源,本篇文章详细的描述Action Filter.Action Filter作为一个可以 ...

  5. 禁用ios7 手势滑动返回功能

    禁用ios7 手势滑动返回功能 版权声明:本文为博主原创文章,未经博主允许不得转载. 在有的时候,我们不需要手势返回功能,那么可以在页面中添加以下代码: - (void)viewDidAppear:( ...

  6. Ant快速入门(一)-----Ant介绍

    Ant是一种基于Java的生成工具.从作用上来看,它类似于C编程(UNIX平台上使用比较多)的Make工具,C/C++项目经常使用Make工具来管理整个项目的编译,生成 Make使用Shell命令来定 ...

  7. thickbox 关于动态生成 无法跳出弹出框的问题

    问题描述: 用jQuery动态生成thickbox的连接代码,发现没有效果. 原因: thickbox在页面加载后,会给a,input,area等绑定弹出事件. 通过tb_init(’a.thickb ...

  8. C++ BigInteger 大整数类模板（转）

    #include <deque> #include <vector> #include <iostream> #include <string> #in ...

  9. has-a关系——包含对象成员的类

    #ifndef _STUDENT_H_ #define _STUDENT_H_ #include <iostream> #include <string> #include & ...

  10. C# 实现3Des加密 解密

    3Des对每个数据块进行了三次的DES加密算法,是DES的一个更安全的变形.比起最初的DES,3DES更为安全. 都是感觉一目了然的摘过来. 下面是加密解密的源码.ECB模式的. public cla ...