摘要：
reverse“index.html<；htmlng-app=“myApp”>；linkrel=“stylesheet”href=“../css/uikit.css“/>；tableclass=“uk tableuk table hoveruk table striped”>；formclass=“uk form”>；
filter用于关键字过滤操作，orderBy用于排序操作，运行界面如下：
点击标题Name与Email实现排序功能，输入框中输入关键字进行过滤，同时实现根据关键字进行过滤后进行排序操作：
ng-repeat="user in users | filter:keyword | orderBy:sortField:reverse"
index.html
<!DOCTYPE html> <html ng-app="myApp"> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../css/uikit.css"/> <link rel="stylesheet" href="../css/my-uikit.css"/> </head> <body> <div class="uk-panel" ng-controller="UserCtrl"> <table class="uk-table uk-table-hover uk-table-striped"> <thead> <tr> <th colspan="2"> <form class="uk-form"> <input type="text" ng-model="keyword" placeholder="Input keword..."/> </form> </th> </tr> <tr class="uk-bg-primary"> <th ng-click="sort('name')">Name</th> <th ng-click="sort('email')">Email</th> </tr> </thead> <tbody ng-repeat="user in users | filter:keyword | orderBy:sortField:reverse" ng-click="selectUser(user)" ng-switch on="isSelected(user)" class="uk-text-success"> <tr> <td>{{user.name}}</td> <td>{{user.email}}</td> </tr> <tr ng-switch-when="true"> <td colspan="2" class="uk-bg-success">{{user.desc}}</td> </tr> </tbody> </table> </div> </body> <script src="../js/angular.js"></script> <script src="index.js"></script> </html>
index.js
var myApp = angular.module('myApp', []); myApp.controller('UserCtrl', ['$scope', function($scope){ $scope.users = [ { name:'张三', email:'zhangsan@gmail.com', desc: '张三的详细信息...' }, { name:'李四', email:'lisi@123.com', desc: '李四的详细信息...' }, { name:'王五', email:'wangwu@qq.com', desc: '王五的详细信息...' } ]; $scope.selectUser = function(user){ $scope.selectedUser = user; }; $scope.isSelected = function(user){ return $scope.selectedUser === user; }; $scope.sortField = undefined; $scope.reverse = false; $scope.sort = function(fieldName){ if($scope.sortField===fieldName){ $scope.reverse=!$scope.reverse; }else{ $scope.sortField = fieldName; $scope.reverse = false; } }; }]);