zoukankan      html  css  js  c++  java
  • 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;
                }
            };
    }]);
  • 相关阅读:
    Scala与Mongodb实践1-----mongodbCRUD
    Scala实践14
    Scala实践13
    Scala实践12
    Scala实践11
    Scala实践10
    Scala实践9
    Scala实践6
    Scala实践8
    Oracle Object Type
  • 原文地址:https://www.cnblogs.com/yshyee/p/4273155.html
Copyright © 2011-2022 走看看