1, |uppercase
2, |lowercase
3,默认美元符 |currency或者|currency:"￥"
4, |date:"yyyy-MM-dd"或者|date:"yyyy年MM月dd日"
下面两个要写在b in books之后
ex：
json=[
{
"Id": 1,
"Title": "JAVA LOGIC",
"Author": "Oracle",
"Price": 10.9999999,
"PubDate": "2010-01-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 16,
"Title": "西游记",
"Author": "吴承恩",
"Price": 10.99,
"PubDate": "2010-01-01",
"Category": {
"Id": 2,
"Name": "文学类"
}
}
]
<tr ng-repeat="b in books|orderBy:'Title'|filter:key">
5, |filter
6, orderBy
<script> angular.module("myApp",[]) .controller("myCtrl",function ($scope,$http) { //$http是一个异步的ajax //首先读取json文件 $http.get("json/books.json").success(function (r) { $scope.books = r; //把结果存到books里 }); }) </script>
完整demo：
1 <!DOCTYPE html> 2 <html lang="zh-cn" data-ng-app="myApp"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 7 <title>angularjs</title> 8 <link href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet"> 9 <link rel="stylesheet/less" href="site.less"> 10 <script src="https://cdn.bootcss.com/jquery/2.1.3/jquery.js"></script> 11 <script src="https://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.js"></script> 12 <script src="https://cdn.bootcss.com/less.js/2.5.0/less.js"></script> 13 <script src="https://cdn.bootcss.com/angular.js/1.4.0/angular.js"></script> 14 </head> 15 <body class="container"> 16 <header class="page-header"><h1>过滤器</h1></header> 17 18 <section ng-app="myApp" ng-controller="myCtrl"> 19 <div> 20 <table class="table table-condensed"> 21 <!--搜索--> 22 <tr class="text-right"> 23 <td colspan="4"> 24 <input type="search" ng-model="key">：搜索 25 </td> 26 </tr> 27 28 <!--这里根据标题排序的话，就是英文从a开始排序--> 29 <!--<tr ng-repeat="b in books|orderBy:'Title'">--> 30 31 <!--允许追加多个过滤器，添加fliter筛选，这里的不能加引号，因为来自一个变量--> 32 <tr ng-repeat="b in books|orderBy:'Title'|filter:key"> 33 34 <!--<td>{{b.Id}}</td>--> 35 <td>{{b.Title|lowercase}}</td> 36 <td>{{b.Author|uppercase}}</td> 37 <!--<td>{{b.Price|currency}}</td>--> 38 <!--除了上面一种写法，也可以自定义货币类型，并自动截取小数点--> 39 <td>{{b.Price|currency:"￥"}}</td> 40 41 <!--<td>{{b.PubDate|date:"yyyy-MM-dd"}}</td>--> 42 <!--除了上面一种写法，也可以改成中文的形式--> 43 <td>{{b.PubDate|date:"yyyy年MM月dd日"}}</td> 44 45 <td>{{b.Category.Name}}</td> 46 </tr> 47 </table> 48 </div> 49 </section> 50 <script> 51 angular.module("myApp",[]) 52 .controller("myCtrl",function ($scope,$http) { 53 //$http是一个异步的ajax 54 //首先读取json文件 55 $http.get("json/books.json").success(function (r) { 56 $scope.books = r; //把结果存到books里 57 }); 58 59 }) 60 </script> 61 62 <footer class="navbar-fixed-bottom text-center"> 63 <span>© 2015</span> 64 </footer> 65 </body> 66 </html>
预览地址：
https://besswang.github.io/ngFilter/index.html