码迷,mamicode.com
首页 > 编程语言 > 详细

如何angular过滤器进行排序???

时间:2017-06-27 00:00:43      阅读:289      评论:0      收藏:0      [点我收藏+]

标签:排序   table   str   http   option   div   blog   技术分享   ble   

首先定义一个json文件:

技术分享

 

然后写HTML文件:

 1 <div id="box">
 2             <!--第一个下拉框-->
 3             <select ng-model="a">
 4                 <option value="age">按照年龄排序</option>
 5                 <option value="code">按照编码排序</option>
 6                 <option value="name">按照姓名排序</option>
 7             </select>
 8             <!--升序还是降序-->
 9             <select ng-model="b">
10                 <option value="">升序</option>
11                 <option value="-">降序</option>
12             </select>
13             <!--一个搜索框-->
14             <input type="text" placeholder="请输入要搜索的内容" ng-model="c"/>
15         </div>
16         <!--渲染的数据-->
17         <div id="wrap">
18             <table>
19                 <tr>
20                     <th>编码</th>
21                     <th>姓名</th>
22                     <th>年龄</th>
23                 </tr>
24                 <tr ng-repeat="item in data|filter:c|orderBy:b+a">
25                     <td>{{item.code}}</td>
26                     <td>{{item.name}}</td>
27                     <td>{{item.age}}</td>
28                 </tr>
29             </table>
30         </div>
31         

 

angular:

1 <script>
2             var app = angular.module("mk",[]);
3             app.controller("test",function($scope,$http){
4                 $http.get(json/index.json).success(function(data){
5                         $scope.data = eval(data);
6                         $scope.a = "code";
7                 })
8             })
9         </script>

 

在这种运用到的过滤器有filter 、orderBy

这样就完成了一个简单的排序,希望能帮到大家!!!!!!!!

 

如何angular过滤器进行排序???

标签:排序   table   str   http   option   div   blog   技术分享   ble   

原文地址:http://www.cnblogs.com/user-5253/p/7082717.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!