• 过滤器是用来格式化给用户展示的数据的。
  • 在 HTML 中的模板绑定符号{{}} 内通过|符号来调用过滤器。
    • 大写:{{ name | uppercase }}
  • 也可以在 JS 中进行调用$filter 服务。
    • app.controller('DemoController', ['$scope', '$filter',
      function($scope, $filter) {
      $scope.name = $filter('lowercase')('Ari');
      }]);
  • 向过滤器传参:{{1234.5643445 | number:2 }}
  • 常用的过滤器:
    • 货币 {{123.5 | currency }}
    • date
      • {{ today | date:'medium' }} <!-- Aug 09, 2013 12:09:02 PM --> {{ today | date:'short' }} <!-- 8/9/1312:09PM -->
        {{ today | date:'fullDate' }} <!-- Thursday, August 09, 2013 --> {{ today | date:'longDate' }} <!-- August 09, 2013 -->
        {{ today | date:'mediumDate' }}<!-- Aug 09, 2013 --> {{ today | date:'shortDate' }} <!-- 8/9/13 -->
        {{ today | date:'mediumTime' }}<!-- 12:09:02 PM --> {{ today | date:'shortTime' }} <!-- 12:09 PM -->
    • 年份 {{ today | date:'yyyy' }} <!-- 2013 --> {{ today | date:'yy' }} <!-- 13 --> {{ today | date:'y' }} <!-- 2013 -->
    • 月份 { today | date:'MMMM' }} <!-- August -->{{ today | date:'MMM' }} <!-- Aug --> {{ today |date:'MM' }}{{ today |date:'M' }}
  • 过滤器 filter
    • 过滤器可以从给定数组中选择一个子集,然后作为一个新数组返回。
    • 参数:
      • string

        • 返回所有包含这个字符串的元素。参数前加!返回不包含该 string 的元素。
        • {{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}
          <!-- ["Lerner","Likes","Eat"] -->
      • object
        • 将参数的属性和值与被过滤元素相应的属性进行比较,过滤出一致的元素。
        • {{ [{
          'name': 'Ari',
          'City': 'San Francisco',
          'favorite food': 'Pizza'
          },{
          'name': 'Nate',
          'City': 'San Francisco',
          'favorite food': 'indian food'
          }] | filter:{'favorite food': 'Pizza'} }}
          <!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->
      • function
        • 对所有元素执行这个函数,过滤出返回结果为非假值的元素。
      • json
        • 将一个 JSON 或者 JS 对象转换成字符串;
        • {{ {'name': 'Ari', 'City': 'SanFrancisco'} | json }}
          <!-- {
          "name": "Ari",
          "City": "San Francisco"
          }-->
      • limitTo
        • 限制返回的数组或者字符串的长度;
      • orderBy
        • 接受两个参数,第一个是必需的,第二个可选。第一个是排序条件,第二个是个布尔值,true 则按照排序条件逆序输出。

      自定义过滤器

      • 定义一个模块用来创建 filter 是比较好的方法。
      •  angular.module('myApp.filters', [])
        .filter('capitalize', function(input) {
        if (input) {
        return input[0].toUpperCase() + input.slice(1);
        }
        });

AngularJS 笔记系列(五)过滤器 filter的更多相关文章

  1. Java基础复习笔记系列 五 常用类

    Java基础复习笔记系列之 常用类 1.String类介绍. 首先看类所属的包:java.lang.String类. 再看它的构造方法: 2. String s1 = “hello”: String ...

  2. 《ASP.NET Core In Action》读书笔记系列五 ASP.NET Core 解决方案结构解析1

    创建好项目后,解决方案资源管理器窗口里我们看到,增加了不少文件夹及文件,如下图所示: 在解决方案文件夹中,找到项目文件夹,该文件夹又包含五个子文件夹 -Models.Controllers.Views ...

  3. Python基础笔记系列五:元组

    本系列教程供个人学习笔记使用,如果您要浏览可能需要其它编程语言基础(如C语言),why?因为我写得烂啊,只有我自己看得懂!! 元组 1)元组的结构和访问.使用方法和列表基本一致,区别主要有两点:1.使 ...

  4. 使用Visual Studio Code开发Asp.Net Core WebApi学习笔记(五)-- Filter

    在上一篇里,介绍了中间件的相关内容和使用方法.本篇将介绍Asp.Net Core MVC框架的过滤器的相关内容和使用方法,并简单说明一下与中间件的区别. 第一部分.MVC框架内置过滤器 下图展示了As ...

  5. AngularJS 笔记系列(四)控制器和表达式

    控制器:在 Angular 中控制器是一个函数,用来向作用域中添加额外的功能.我们用它来给作用域对象设置初始状态,并添加自定义行为. 使用方法: var app = angualr.module('a ...

  6. AngularJS 笔记系列(三)模块和作用域

    模块: 在 AngularJS 中,将函数代码全部都定义在全局命名空间中绝对不是什么好主意,全局变量污染会使冲突几率变大,调试困难,降低开发效率.上次写计时器的 controller 时,我们把 co ...

  7. Windows-universal-samples学习笔记系列五:Custom user interactions

    Custom user interactions Basic input Complex inking Inking Low latency input Simple inking Touch key ...

  8. LeetCode 笔记系列五 Generate Parentheses

    题目: Given n pairs of parentheses, write a function to generate all combinations of well-formed paren ...

  9. Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...

随机推荐

  1. CSS:scrollbar的属性及样式分类

    overflow            内容溢出时的设置(设定被设定对象是否显示滚动条) overflow-x         水平方向内容溢出时的设置 overflow-y         垂直方向 ...

  2. bootstrap基础学习五篇

    bootstrap表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. < ...

  3. hdu 1022:Train Problem I(数据结构,栈,递归,dfs)

    Train Problem I Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  4. cookie绕过验证码并关联对话发送一个随笔草稿箱

    先手动发送一个草稿,然后用fiddler取到body参数 代码: #coding:utf-8import requests login_url="https://passport.cnblo ...

  5. Python学习笔记6-字典Dict

    Python内置了字典:dict的支持,dict全称dictionary,在其他语言中也称为map,使用键-值(key-value)存储,具有极快的查找速度. >>> person ...

  6. Python学习笔记4—列表List

    列表定义 Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. >>> a=['] >>> type(a) &l ...

  7. Android无线测试之—UiAutomator UiScrollable API介绍五

    滑动区域校准常量设置与获取 一.校准概念 校准常量指的是:滑动操作坐标时的偏移量,用来取偏移比例 二.相关API 返回值 API 描述 double getSwipeDeadZonePercentag ...

  8. 使用pug(jade),以及在vue+webpack中使用pug(jade)

    一:在HTML中使用pug 在css中有预处理器less和scss来使我们的样式表更加的简介,那么在HTML中有没有这样的格式呢,答案是有的,那就是pug(前身是jade),效果如下: 转译以后 好, ...

  9. vue的递归组件以及三级菜单的制作

    js里面有递归算法,同时,我们也可以利用props来实现vue模板的递归调用,但是前提是组件拥有 name 属性 父组件:slotDemo.vue: <template> <div& ...

  10. XXL-JOB分布式任务调度平台安装与部署

    配XXL-JOB分布式任务调度平台安装与部署