filter 以及 orderBy的使用

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;
            }
        };
}]);

 

posted @ 2015-02-04 19:44  yshy  阅读(560)  评论(0)  编辑  收藏  举报