过滤器

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>&copy; 2015</span>
64 </footer>
65 </body>
66 </html>
index.html

预览地址：

https://besswang.github.io/ngFilter/index.html

 

posted @ 2017-04-16 01:30  最爱小虾  阅读(147)  评论(0)  编辑  收藏  举报