angular 过滤排序

 1 <table class="table">
 2     <thead>
 3     <tr>
 4         <th ng-click="changeOrder('id')" ng-class="{dropup:order === ''}">
 5             产品编号
 6             <span ng-class="{orderColor:orderType === 'id'}" class="caret"></span>
 7         </th>
 8         <th ng-click="changeOrder('name')"  ng-class="{'dropup':order === ''}">
 9             产品名字
10             <span ng-class="{orderColor:orderType === 'name'}" class="caret"></span>
11         </th>
12         <th ng-click="changeOrder('price')"  ng-class="{'dropup':order === ''}">
13             产品价格
14             <span ng-class="{orderColor:orderType === 'price'}" class="caret"></span>
15         </th>
16     </tr>
17     </thead>
18     <tbody>
19      <tr ng-repeat="product in productData | filter:search | orderBy:order+orderType">
20          <td>
21              {{product.id}}
22          </td>
23          <td>
24              {{product.name}}
25          </td>
26          <td>
27              {{product.price}}
28          </td>
29      </tr>
30     </tbody>
31     </table>
 1   var myapp = angular.module('product',[])
 2 
 3     .service("productData",function(){
 4         return[
 5             {
 6                 id:1000,
 7                 name:"iphone5s",
 8                 price:4300
 9             },
10             {
11                 id:3300,
12                 name:"iphone5",
13                 price:3300
14             },
15             {
16                 id:232,
17                 name:"mac",
18                 price:23000
19             },
20             {
21                 id:1400,
22                 name:"ipad",
23                 price:6900
24             }
25         ]
26     })
27             myapp.controller("productController",function($scope,productData){
28                 $scope.productData = productData;
29                 $scope.orderType ='id';
30                 $scope.order = '-';
31                 $scope.changeOrder =function(type){
32                     $scope.orderType = type;
33                     if($scope.order === ''){
34                         $scope.order = '-';
35                     }else{
36                         $scope.order = '';
37                     }
38                 }
39 
40 })

 在AngularJS的世界里,filter提供了一种格式化数据的方法,Angular也提供给我们了很多内建的过滤器,并且建立自定义过滤器也是相当的简单

原文地址:https://www.cnblogs.com/bhan/p/5428529.html