【07】AngularJS Filters

AngularJS Filters


过滤器能够应用三个管道字符(|)添加到表明式和下令中。


AngularJS 过滤器

AngularJS
过滤器可用来转移数据:

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

表明式中添加过滤器

过滤器能够经过多少个管道字符(|)和三个过滤器添加到表明式中。

  1. <div ng-app="myApp" ng-controller="personCtrl">
  2. FirstName:<input type="text" ng-model="firstName"><br>
  3. LastName:<input type="text" ng-model="lastName"><br>
  4. <br>
  5. FullName:{{firstName +" "+ lastName}}
  6. </div>
  7. <script src="personController.js"></script>

 

 personController.js 

  1. angular.module('myApp',[]).controller('personCtrl', function($scope){
  2. $scope.firstName ="John",
  3. $scope.lastName ="Doe",
  4. $scope.fullName = function(){
  5. return $scope.firstName +" "+ $scope.lastName;
  6. }
  7. });

 

 

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

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

 

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

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

 


currency 过滤器

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

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

 


向指令添加过滤器

过滤器能够经过三个管道字符(|)和3个过滤器添加到指令中。

orderBy 过滤器依看新闻注解式排列数组:

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

 

过滤输入

输入过滤器能够通过3个管道字符(|)和七个过滤器添加到指令中,该过滤器后跟三个冒号和一个模型名称。

filter 过滤器从数组中甄选多个子集:

  1. <div ng-app="myApp" ng-controller="namesCtrl">
  2. <p><input type="text" ng-model="test"></p>
  3. <ul>
  4. <li ng-repeat="x in names | filter:test | orderBy:'country'">
  5. {{(x.name | uppercase)+', '+ x.country }}
  6. </li>
  7. </ul>
  8. </div>

 

 

魔芋练习:

 

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="renderer" content="webkit">
  6. <!--360,以webkit内核进行渲染-->
  7. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  8. <!--以最新内核进行渲染。-->
  9. <meta http-equiv="Cache-Control" content="no-siteapp"/>
  10. <!--百度禁止转码-->
  11. <title>moyu demo</title>
  12. <meta name="keywords" content="demo 测试 魔芋">
  13. <meta name="description" content="魔芋的测试示例">
  14. <meta name="author" content="魔芋,15000720652@163.com,http://www.cnblogs.com/moyuling/">
  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>
  21. </style>
  22. </head>
  23. <body>
  24. <div ng-app="myApp" ng-controller="myCtrl">
  25. <input type="text" ng-model="firstName">
  26. <input type="text" ng-model="lastName">
  27. <p>{{firstName +' '+ lastName}}</p>
  28. <p>{{firstName|uppercase}}</p>
  29. <p>{{price|currency}}</p>
  30. <ul>
  31. <li ng-repeat="x in moyuList|orderBy:'country'">
  32. {{x.name+","+ x.country}}
  33. </li>
  34. </ul>
  35. <p>filter</p>
  36. <p>
  37. <input type="text" ng-model="test">
  38. </p>
  39. <ul>
  40. <li ng-repeat="x in moyuList | filter:test | orderBy:'country'">
  41. {{x.name+","+ x.country}}
  42. </li>
  43. </ul>
  44. </div>
  45. <script>
  46. var app = angular.module('myApp',[]);
  47. app.controller('myCtrl',function($scope){
  48. $scope.firstName ="mo";
  49. $scope.lastName ="yu";
  50. $scope.price =123;
  51. $scope.moyuList =[{
  52. name:"上海",
  53. country:"2上海市"
  54. },{
  55. name:"湖北",
  56. country:"1武汉"
  57. },{
  58. name:"湖南",
  59. country:"3长沙"
  60. }]
  61. })
  62. </script>
  63. </body>
  64. </html>

 

结果:

图片 1

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

=

 

=

相关文章