• 不同过滤器的小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. HTML&CSS基础学习笔记1.28-给网页添加一个css样式

    CSS是什么? 当HTML配合CSS一起使用时,我们发现页面变得好看了很多.那么CSS到底是什么呢? CSS指层叠样式表 (Cascading Style Sheets),它主要是用于定义HTML标签 ...

  2. python中的formatter的详细用法

    今天抽空学习了一下python中的string service中的formatter的相关用法,主要是为了让自己的代码看起来更加和谐,因为很多java或者c语言过来的开发者都不怎么爱使用python的 ...

  3. bzoj2067: [Poi2004]SZN

    Description String-Toys joint-stock 公司需要你帮他们解决一个问题. 他们想制造一个没有环的连通图模型. 每个图都是由一些顶点和特定数量的边构成. 每个顶点都可以连向 ...

  4. codeforces 235 B. Let's Play Osu!

    You're playing a game called Osu! Here's a simplified version of it. There are n clicks in a game. F ...

  5. native2ascii 在 Mac终端的转码

    打开终端,输入 native2ascii 回车   然后输入想要转码的 中文   回车   自动会出现  通用的  unicode编码. 默认应该是 utf-8 格式

  6. JS和正则表达式验证手机号码、邮箱等

    <-------------------------------------验证手机号码---------------------------------------------> fun ...

  7. Redis系列(1)之安装

    Redis系列(1)之安装 由于项目的需要,最近需要研究下Redis.Redis是个很轻量级的NoSql内存数据库,它有多轻量级的呢,用C写的,源码只有3万行,空的数据库只占1M内存.它的功能很丰富, ...

  8. C语言学习笔记--类型定义&联合

    一.类型定义 C语言自定义数据类型 (typedef) C语言提供一个叫做typedef的功能来声明一个已有的数据类型的新名字. typedef int Length; 使得Length成为int类型 ...

  9. 【HDOJ】1078 FatMouse and Cheese

    这道题目是典型的DFS+记忆化搜索, DP思想.符合:含重叠子问题,无后效性等特点. #include <cstdio> #include <cstring> #include ...

  10. 【转】掌握java枚举类型(enum type)

    原文网址:http://iaiai.iteye.com/blog/1843553 1   背景 在java语言中还没有引入枚举类型之前,表示枚举类型的常用模式是声明一组具有int常量.之前我们通常利用 ...