add filter to dynamic table example

Author: esvit

examples/demo20.html

@@ -22,6 +22,8 @@ <h1>Dynamic columns</h1>
 
 <div ng-controller="DemoCtrl">
 
+    <p><strong>Filter:</strong> {{tableParams.filter()|json}}
+
     Columns:
     <label class="checkbox" ng-repeat="column in columns">
         <input type="checkbox" ng-model="column.visible" /> {{column.title}}
@@ -39,6 +41,18 @@ <h1>Dynamic columns</h1>
                 <div>{{column.title}}</div>
             </th>
         </tr>
+        <tr class="ng-table-filters" ng-init="tableParams">
+            <th ng-repeat="column in columns" ng-show="column.visible" class="filter">
+                <div ng-repeat="(name, filter) in column.filter">
+                    <div ng-if="column.filterTemplateURL" ng-show="column.filterTemplateURL">
+                        <div ng-include="column.filterTemplateURL"></div>
+                    </div>
+                    <div ng-if="!column.filterTemplateURL" ng-show="!column.filterTemplateURL">
+                        <div ng-include="'ng-table/filters/' + filter + '.html'"></div>
+                    </div>
+                </div>
+            </th>
+        </tr>
         </thead>
         <tbody>
         <tr ng-repeat="user in $data">
@@ -87,6 +101,12 @@ <h1>Dynamic columns</h1>
                                     $filter('orderBy')(data, params.orderBy()) :
                                     data;
 
+                            orderedData = params.filter() ?
+                                    $filter('filter')(orderedData, params.filter()) :
+                                    orderedData;
+
+                            console.info(orderedData.length);
+                            params.total(orderedData.length);
                             $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                         }
                     });

ng-table.js

@@ -411,6 +411,7 @@ app.factory('ngTableParams', ['$q', '$log', function ($q, $log) {
                     self.data = settings.$scope.$data = data;
                 }
                 settings.$scope.pages = self.generatePagesArray(self.page(), self.total(), self.count());
+                settings.$scope.$emit('ngTableAfterReloadData');
             });
         };
 
@@ -461,7 +462,7 @@ app.factory('ngTableParams', ['$q', '$log', function ($q, $log) {
  * @description
  * Each {@link ngTable.directive:ngTable ngTable} directive creates an instance of `ngTableController`
  */
-var ngTableController = ['$scope', 'ngTableParams', '$q', function ($scope, ngTableParams, $q) {
+var ngTableController = ['$scope', 'ngTableParams', '$timeout', function ($scope, ngTableParams, $timeout) {
     $scope.$loading = false;
 
     if (!$scope.params) {
@@ -472,8 +473,8 @@ var ngTableController = ['$scope', 'ngTableParams', '$q', function ($scope, ngTa
     var delayFilter = (function () {
         var timer = 0;
         return function (callback, ms) {
-            clearTimeout(timer);
-            timer = setTimeout(callback, ms);
+            $timeout.cancel(timer);
+            timer = $timeout(callback, ms);
         };
     })();
 
@@ -690,7 +691,7 @@ app.directive('ngTablePagination', ['$compile',
             replace: false,
             link: function (scope, element, attrs) {
 
-                scope.$watch('params.$params', function (newParams, oldParams) {
+                scope.params.settings().$scope.$on('ngTableAfterReloadData', function () {
                     scope.pages = scope.params.generatePagesArray(scope.params.page(), scope.params.total(), scope.params.count());
                 }, true);
 

ng-table.map

@@ -362,6 +362,7 @@ app.factory('ngTableParams', ['$q', '$log', function ($q, $log) {
                     self.data = settings.$scope.$data = data;
                 }
                 settings.$scope.pages = self.generatePagesArray(self.page(), self.total(), self.count());
+                settings.$scope.$emit('ngTableAfterReloadData');
             });
         };
 

ng-table.min.js

@@ -13,7 +13,7 @@
  * @description
  * Each {@link ngTable.directive:ngTable ngTable} directive creates an instance of `ngTableController`
  */
-var ngTableController = ['$scope', 'ngTableParams', '$q', function ($scope, ngTableParams, $q) {
+var ngTableController = ['$scope', 'ngTableParams', '$timeout', function ($scope, ngTableParams, $timeout) {
     $scope.$loading = false;
 
     if (!$scope.params) {
@@ -24,8 +24,8 @@ var ngTableController = ['$scope', 'ngTableParams', '$q', function ($scope, ngTa
     var delayFilter = (function () {
         var timer = 0;
         return function (callback, ms) {
-            clearTimeout(timer);
-            timer = setTimeout(callback, ms);
+            $timeout.cancel(timer);
+            timer = $timeout(callback, ms);
         };
     })();
 

src/scripts/03-params.js

@@ -24,7 +24,7 @@ app.directive('ngTablePagination', ['$compile',
             replace: false,
             link: function (scope, element, attrs) {
 
-                scope.$watch('params.$params', function (newParams, oldParams) {
+                scope.params.settings().$scope.$on('ngTableAfterReloadData', function () {
                     scope.pages = scope.params.generatePagesArray(scope.params.page(), scope.params.total(), scope.params.count());
                 }, true);