• 不同过滤器的小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. Debian ls 文件 文件夹颜色显示

    一.让debian终端文件显示不同颜色 vim  /etc/vim/vimrc取消“syntax on”的注释 二.让debian终端文件夹显示不同颜色 修改.bashrc文件,vim /root/. ...

  2. JSON基础知识总结

    JSON基础 一.JSON简介 JSON,全称“JavaScript Object Notation(JavaScript对象表示法)”,起源于JavaScript的对象和数组.JSON,说白了就是J ...

  3. POJ - 3903 Stock Exchange（LIS最长上升子序列问题）

    E - LIS Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u   Descripti ...

  4. iOS8之后CoreLocation定位的使用

    在Info.plist文件中添加如下配置: //始终允许访问位置信息 (1)NSLocationAlwaysUsageDescription //使用应用程序期间允许访问位置数据 (2)NSLocat ...

  5. Egret 矢量绘图、遮罩、碰撞检测

    矢量绘图: 1. 为矢量绘图绘制外边 - graphics.lineStype() private createGameScene():void { console.log("Runtime ...

  6. 基于OSGi的企业级快速开发平台(开源)

    模块化.插件化是未来的主流趋势,他很好的解决了,公司知识的积累.应用分发.商务模式.快速构建等一系列问题,国外著名的插件化平台JIRA就非常成功,国内的目前很多公司在偿试插件化的开发模式,作为平台推出 ...

  7. 之前C#代码的重新设计

    /* 我用python重构了一把这个代码 大家的反应似乎是过度设计了 好吧,我决定不那么激进,采用更中庸一些的重构 我也有些疑惑: 是否如果重构后的代码比重构前要多,就算过度了呢? */ void m ...

  8. Go语言开发环境安装

    Go是Google开发的一种编译型,並發型,并具有垃圾回收功能的编程语言. 去http://golang.org/doc/install#download 下载相应的版本. 1.安装go语言:2.将g ...

  9. 「Poetize10」能量获取

    描述 Description “封印大典启动,请出Nescafe魂珠!”随着 圣主applepi一声令下,圣剑护法rainbow和魔杖护法freda将Nescafe魂珠放置于封印台上.封印台是一个树形 ...

  10. -_-#【Angular】工具函数

    AngularJS学习笔记 上下文绑定 var f = angular.bind({a: 'xx'}, function() { console.log(this.a) }) f() // 'xx' ...