filter 以及 orderBy的使用

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:'[email protected]',

                desc: '张三的详细信息...'

            },

            {

                name:'李四',

                email:'[email protected]',

                desc: '李四的详细信息...'

            },

            {

                name:'王五',

                email:'[email protected]',

                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;

            }

        };

}]);

 

你可能感兴趣的:(filter)