AngularJS Filters

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

AngularJS 过滤器

AngularJS 过滤器可用于转换数据：

过滤器 描述
currency[ˈkɜ:rənsi] 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。

表达式中添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。

  2. <div ng-app="myApp" ng-controller="personCtrl">
  3.  
  4. FirstName:<input type="text" ng-model="firstName"><br>
  5. LastName:<input type="text" ng-model="lastName"><br>
  6. <br>
  7. FullName:{{firstName +" "+ lastName}}
  8.  
  9. </div>
  10.  
  11. <script src="personController.js"></script>
 
 personController.js 
  2. angular.module('myApp',[]).controller('personCtrl', function($scope){
  3. $scope.firstName ="John",
  4. $scope.lastName ="Doe",
  5. $scope.fullName = function(){
  6. return $scope.firstName +" "+ $scope.lastName;
  7. }
  8. });
 
 

uppercase 过滤器将字符串格式化为大写：

  1. <div ng-app="myApp" ng-controller="personCtrl">
  3. <p>姓名为{{ lastName | uppercase }}</p>
  5. </div>
 

lowercase 过滤器将字符串格式化为小写：

  1. <div ng-app="myApp" ng-controller="personCtrl">
  3. <p>姓名为{{ lastName | lowercase }}</p>
  5. </div>
 

currency 过滤器

currency 过滤器将数字格式化为货币格式：

  1. <div ng-app="myApp" ng-controller="costCtrl">
  3. <input type="number" ng-model="quantity">
  4. <input type="number" ng-model="price">
  6. <p>总价={{(quantity * price)| currency }}</p>
  8. </div>
 

向指令添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。

orderBy 过滤器根据表达式排列数组：

  1. <div ng-app="myApp" ng-controller="namesCtrl">
  3. <ul>
  4. <li ng-repeat="x in names | orderBy:'country'">
  5. {{ x.name +', '+ x.country }}
  6. </li>
  7. </ul>
  9. <div>
 

过滤输入

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

filter 过滤器从数组中选择一个子集：

  1. <div ng-app="myApp" ng-controller="namesCtrl">
  3. <p><input type="text" ng-model="test"></p>
  5. <ul>
  6. <li ng-repeat="x in names | filter:test | orderBy:'country'">
  7. {{(x.name | uppercase)+', '+ x.country }}
  8. </li>
  9. </ul>
  11. </div>
 
 
魔芋练习：
 
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  4. <head>
  5. <meta charset="utf-8">
  6. <meta name="renderer" content="webkit">
  7. <!--360,以webkit内核进行渲染-->
  8. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  9. <!--以最新内核进行渲染。-->
  10. <meta http-equiv="Cache-Control" content="no-siteapp"/>
  11. <!--百度禁止转码-->
  12. <title>moyu demo</title>
  13. <meta name="keywords" content="demo 测试 魔芋">
  14. <meta name="description" content="魔芋的测试示例">
  15. <meta name="robots" content="index,follow">
  16. <!--定义网页搜索引擎索引方式-->
  17. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  18. <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  19. <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
  20. <style>
  22. </style>
  23. </head>
  25. <body>
  26. <div ng-app="myApp" ng-controller="myCtrl">
  27. <input type="text" ng-model="firstName">
  28. <input type="text" ng-model="lastName">
  29. <p>{{firstName +' '+ lastName}}</p>
  30. <p>{{firstName|uppercase}}</p>
  31. <p>{{price|currency}}</p>
  32. <ul>
  33. <li ng-repeat="x in moyuList|orderBy:'country'">
  34. {{x.name+","+ x.country}}
  35. </li>
  36. </ul>
  37. <p>filter</p>
  38. <p>
  39. <input type="text" ng-model="test">
  40. </p>
  41. <ul>
  42. <li ng-repeat="x in moyuList | filter:test | orderBy:'country'">
  43. {{x.name+","+ x.country}}
  44. </li>
  45. </ul>
  46. </div>
  47. <script>
  48. var app = angular.module('myApp',[]);
  49. app.controller('myCtrl',function($scope){
  50. $scope.firstName ="mo";
  51. $scope.lastName ="yu";
  52. $scope.price =123;
  53. $scope.moyuList =[{
  54. name:"上海",
  55. country:"2上海市"
  56. },{
  57. name:"湖北",
  58. country:"1武汉"
  59. },{
  60. name:"湖南",
  61. country:"3长沙"
  62. }]
  63. })
  64. </script>
  65. </body>
  67. </html>
 
结果：
 
 
 
 
 

【07】AngularJS Filters的更多相关文章

  1. SSAS系列——【07】多维数据（查询Cube）

    原文:SSAS系列——[07]多维数据(查询Cube) 1.什么是MDX? MDX叫做"多维表达式",是一种查询语言,是一种和SQL类似的查询语言,它基于 XML for Anal ...

  2. 【西祠日志】【07】努力努力，找资料，思考，怎么做asp图片上传

    [西祠日志][07]努力努力,找资料.思考.怎么做asp图片上传  (2015.07.23周四) 今天忘了带本子.直接写在书上了笔记,晚点还是夹在本子里. 学了这么久的web应用,一直都没时间去做一点 ...

  3. 【07】像使用命令行一样使用 GitHub URL

    [07] 像使用命令行一样使用 GitHub URL 既然说到了 URL,那么久接着聊一下.使用 UI 浏览 GitHub 很 方面也很好,不过很多时候最快的方式是使用 URL 来浏览.举个例子,如果 ...

  4. 【07】Firebug监控网络情况

    [07] Firebug监控网络情况 Firebug可以监控网页中每个文件加载的时间. 打开Firebug.点击"网络",然后确定已经启用,重新载入当前页面.Firebug显示如下 ...

  5. 【07】QQ群管理公告小结：

    [07]QQ群管理公告小结:   01,请看公告遵守相关规定. 02,群内除QQ自带的缺省表情外(不是QQ的VIP或大图表情),禁止发送大表情,大图片(展示问题的屏幕截图除外),   03,修改群名片 ...

  6. 【07】循序渐进学 docker：数据持久化

    写在前面的话 学到这里相信有心的朋友都发现问题了,我们每次都会去删掉容器,在创建新的容器.那数据怎么办?岂不删库跑路了? 就算不是数据库,假设公司有日志保留的需求,那每一次发布岂不日志都被干掉了? D ...

  7. 【转】angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

  8. 【面试】【Spring常见问题总结】【07】

    [常见面试问题总结文件夹>>>] 61.Spring IoC容器的依赖有两层含义: Bean依赖容器:也就是说Bean要依赖于容器,这里的依赖是指容器负责创建Bean并管理Bean的 ...

  9. 【转】AngularJS 取消对 HTML 片段的转义

    今天尝试用 Rails 做后端提供 JSON 格式的数据, AngularJS 做前端处理 JSON 数据,其中碰到 AngularJS 获取的是一段 HTML 文本,如果直接使用 data-ng-b ...

随机推荐

  1. bzoj 1630: [Usaco2007 Demo]Ant Counting【dp】

    满脑子组合数学,根本没想到dp 设f[i][j]为前i只蚂蚁,选出j只的方案数,初始状态为f[0][0]=1 转移为 \[ f[i][j]=\sum_{k=0}^{a[i]}f[i-1][j-k] \ ...

  2. php做APP接口开发,接口的安全性

    1.当用户登录APP时,使用https协议调用后台相关接口,服务器端根据用户名和密码时生成一个access_key,并将access_key保存在session(或者保存在redis)中,将生成的ac ...

  3. STL之set和multiset

    set是与集合相关的容器,STL为我们提供了set的实现,在编程题中遇见集合问题直接调用是十分方便 SET set模版类的定义在头文件<set>中. 定义set对象的示例代码如下: set ...

  4. ACM_天涯若比邻（最小与最大相邻素数）

    天涯若比邻 Time Limit: 2000/1000ms (Java/Others) Problem Description: 一心想搞ACM的小G最近迷上了数论,特别对于跟“素数”相关的问题特别有 ...

  5. ora-20000 unable to analyze

    ora-20000 unable to analyze 无法分析表 check: select * from wmsprdata.cmp3$88278表不存在. result:应该是系统自动任务2:0 ...

  6. SQL编程语句

    视图 视图就是我们查询出来的虚拟表创建视图:create view 视图名 as SQL查询语句,分组,排序,in 等都不能写视图的用法: select * from 视图名 SQL编程 定义变量:d ...

  7. jquery中有关cookie的使用简要说明

    jquery.cookie.js 的配置 首先包含jQuery的库文件,在后面包含 jquery.cookie.js 的库文件. <script type="text/javascri ...

  8. NodeJs学习记录（六）使用 res.locals 传递参数到页面

    res.locals的生命周期是单次请求,有点类似于java servlet 里的  httpServletRequest.setAttribute("param1",1); 既然 ...

  9. LN : leetcode 338 Counting Bits

    lc 338 Counting Bits 338 Counting Bits Given a non negative integer number num. For every numbers i ...

  10. oracle 用sql语句管理数据库

    基础sql语句 创建数据库 :create database database_name; 创建表:create table(字段名 字段类型 字段为空约束 ,字段名 字段类型 字段为空约束,,,, ...