• 不同过滤器的小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. Java反射机制（转载）

    原文链接:http://www.blogjava.net/zh-weir/archive/2011/03/26/347063.html Java反射机制是Java语言被视为准动态语言的关键性质.Jav ...

  2. php xcache 配置 使用 （转载）

    xcache的使用与配置 一.安装Xcache # wget http://xcache.lighttpd.net/pub/Releases/1.3.0/xcache-1.3.0.tar.gz # t ...

  3. jquery easy ui 学习 （6） basic validatebox

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 快速排序（Quick Sort）的C语言实现

    快速排序(Quick Sort)的基本思想是通过一趟排序将待排记录分割成独立的两部分,其中一部分记录的关键字均比另一部分记录的关键字小,则可分别对着两部分记录继续进行排序,以达到整个序列有序,具体步骤 ...

  5. Linux——搭建PHP开发环境第一步：apache

    原文链接:http://www.2cto.com/os/201511/450258.html ##### Apache 编译安装[root@localhost ~]# yum install gcc ...

  6. XML SAX解析

    SAX是一种占用内存少且解析速度快的解析器,它采用的是事件驱动,它不需要解析完整个文档,而是按照内容顺序,看文档某个部分是否符合xml语法,如果符合就触发相应的事件.所谓的事件就是些回调方法( cal ...

  7. Macro Substitution

    看<C程序设计语言>(英文版)学到的两个用法. 两个很简单的宏用法. #的用法: if, however, a parameter name is preceded by a # in t ...

  8. 【Java解惑】表达式问题

    1. 如果判断一个参数是否是奇数? 我们通过下面代码来尝试一下,看看方法可行不: public static boolean isOdd(int i) { return i % 2 == 1; } p ...

  9. Delphi Ini 操作简单例子

    interface uses   Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,   Dialog ...

  10. socket编程里的read和recv函数【转载】

    本文转载自:http://blog.163.com/like12@126/blog/static/63023403201291983117551/ 1.read 与 recv 区别 read 原则: ...