Edit - Sort - Filter Table

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <style>
        #customer-table a{display: block;padding: 5px;   background: lightblue;text-decoration: none;}
    </style>
</head>
<body>
<div ng-app="MyApp">
    <div id="customer-table" ng-controller="MyCtrl as vm">
        {{vm.data}}
        <table class="table">
            <thead>
                <tr>
                    <th class="col-xs-6"><a ng-click="vm.sort('name')" href="#">Name
                        <span ng-show="vm.predicate == 'name'" class="pull-right">
                        <span ng-show="!vm.reverse" class="glyphicon glyphicon-chevron-up"></span>
                            <span  ng-show="vm.reverse"  class="glyphicon glyphicon-chevron-down"></span>
                            </span>
                        </a>
                        <input type="text" class="form-control" ng-model="fName"/>
                    </th>
                    <th class="col-xs-6">
                        <a ng-click="vm.sort('age')" href="#">Age
                            <span ng-show="vm.predicate == 'age'"class="pull-right">
                                <span ng-show="!vm.reverse" class="glyphicon glyphicon-chevron-up"></span>
                                <span ng-show="vm.reverse"  class="glyphicon glyphicon-chevron-down"></span>
                            </span>
                        </a>
                        <input type="text" class="form-control"  ng-model="fAge"/>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="obj in vm.data | filter:{name:fName} | filter:{age:fAge}">
                    <td><input type="text" ng-model="obj.name"></td>
                    <td><input type="text" ng-model="obj.age"></td>
                </tr>
            </tbody>
        </table>
        {{vm.predicate}} {{vm.reverse}}
    </div>
</div>

<script>
    (function (module) {
        function myCtrl($scope, $filter) {
            var vm = this;
            vm.data = [
                { name: "Bernard", age: 19 },
                { name: "Bogart", age: 17 },
                { name: "Trevor", age: 12 },
                { name: "Dunn", age: 9 },
                { name: "Preston", age: 23 },
             ];
            vm.sort = function (predicate) {
                vm.predicate = predicate;
                vm.reverse = (vm.predicate == predicate) ? !vm.reverse : false;
                vm.data = $filter('orderBy')(vm.data, predicate, vm.reverse); //magic
            }
            vm.filters = {};
            vm.headerFilter = ['name', 'filter'];
        }
        module.controller("MyCtrl", ['$scope', '$filter', myCtrl]);
    })(angular.module('MyApp', []));
</script>
</body>

Ví dụ 1 : demo

Mục liên quan:

Thiết kế website
0935999617
0935999617