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也提供给我们了很多内建的过滤器,并且建立自定义过滤器也是相当的简单