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. Same origin policy

    Chrome: Origin null is not allowed by Access-Control-Allow-Origin 的问题 发送 http request 时遇到 error: Ori ...

  2. 7章 Admin

    Admin这个东西本身就已经存在于我们的项目中,是Django自己创建的.admin是Django自带的一个APP. # Application definition INSTALLED_APPS = ...

  3. 略微讲讲最近的 webpack 该如何加快编译

    首先假设 基础的环境是有 creat-react-app 所创建的 即所有基础的loader,插件的 cache 都已经缓存了 在这种情况下想加速,真是很难 不过,有一个插件是可以观察 各个模块所花的 ...

  4. OpenGL 2D模式

    // // left top 这里设置的默认是左上角 // void push_view2d(int left, int top, int width, int height) { //glPushA ...

  5. 例题 5-1 STL

    Raju and Meena love to play with Marbles. They have got a lot of marbles with numbers written on the ...

  6. thinkphp5 分页 paginate

    tp5分页带参数的时候,用到 paginate 后面的几个参数 paginate有三个参数, 第一个必须表是每页分多少个[如果配置文件中设置了,可以不用] 第二个参数表是的是简洁分页,如果为true, ...

  7. 二分图判定+点染色/并查集 BestCoder Round #48 ($) 1002 wyh2000 and pupil

    题目传送门 /* 二分图判定+点染色:因为有很多联通块,要对所有点二分图匹配,若不能,存在点是无法分配的,no 每一次二分图匹配时,将点多的集合加大最后第一个集合去 注意:n <= 1,no,两 ...

  8. JAVAEE 是什么，如何获取各种规范jar包及各种规范的jar包源码

    1.什么是JAVA EE JAVA EE是由一系列规范组成的,规范是由JCP制定的,并且提供了参考实现.规范(Specification)是一系列接口,不包含具体实现 有以下常见的JAVA EE实现, ...

  9. Jax

    The scope of this project is to automate the current Credit Correction process of opening, editing, ...

  10. Props、State、Refs 与表单处理

    我们也了解到 React Component 事实上可以视为显示 UI 的一个状态机(state machine),而这个状态机根据不同的 state(透过 setState() 修改)和 props ...