天天看點

angularjs 實作排序功能

實作公式:{{orderBy_expression | orderBy:expression:reverse}}

Example

<script>

 var app=angular.module("myApp",[]);

app.controller("Ctrl",function($scope){

 $scope.friends=[

 {name:"John",phone:‘555-1212‘,age:10},

     {name:"Mary",phone:‘555-9876‘,age:19},

 {name:"Mike",phone:‘555-4321‘,age:21},

     {name:"Admin",phone:‘555-5678‘,age:35},

 {name:"Julie",phone:‘555-8765‘,age:29},

 ];

 $scope.predicate=‘-age‘;

    });

<body>

           <div

ng-controller="Ctrl">

     <pre>Sort

predicate={{predicate}};reverse={{reverse}}</pre>

 <hr/>

     [<a href=""

ng-click="predicate=‘‘">unsorted</a>]

         <table

class="friend">

         <tr>

     <th>

     <a

ng-click="predicate=‘name‘;reverse=!reverse">Name</a>

         <!--  (<a

ng-click="predicate=‘-name‘;reverse=fase">^</a>)-->

 </th>

             <th><a

href="" ng-click="predicate=‘phone‘;reverse=!reverse">phone

number</a></th>

href=""

ng-click="predicate=‘age‘;reverse=!reverse">Age</a></th>

         </tr>

 <tr ng-repeat="friend in friends |

orderBy:predicate:reverse">

 <td>{{friend.name}}</td>

 <td>{{friend.phone}}</td>

 <td>{{friend.age}}</td>

 </tr>

     </table>

     </div>

   </body>