CODEWITHSUNDEEP
angularjssmart-table
mapf
mapf

Reputation: 506

Show all applied filters of smart-table

I want to display all applied filters of smart-table in a div. My idea was to write a directive that watches the ctrl.tableState().search.predicateObject property:

directivesModule.directive('filterBar', function() {
return {
    restrict:'E',
    require:'^stTable',
    template: '<div class="row"><div class="col-xs-12 filters"><span class="filters-header">Filters: </span><span class="tag label label-default" ng-repeat="filter in filters"><span>{{filter.name}}</span><a><i class="remove glyphicon glyphicon-remove-sign glyphicon-white"></i></a> </span> </div> </div>',
    scope: true,
    link:function(scope, element, attr, ctrl){
        scope.$watchCollection(ctrl.tableState().search.predicateObject, function(newVal, oldVal) {
            console.log(newVal, oldVal);
        });
    }
};
});

However the console.log is only called once showing undefinded twice.

I use the following code to add a filter:

directivesModule.directive('addFilter', function() {
    return {
        restrict:'A',
        require:'^stTable',
        scope: {
            criterion: '@',
            value: '@'
        },
        link:function(scope, element, attr, ctrl){

            element.bind('click', function() {
                scope.$apply(function() {
                    ctrl.search(scope.value, scope.criterion);
                    console.log(ctrl.tableState().search.predicateObject);
                });
            });
        }
    };
});

Upvotes: 1

Views: 481

Answers (2)

mapf
mapf

Reputation: 506

As a solution I went for ngTable. This made it much easier. I use this code now:

"use strict";
var directivesModule = angular.module("directives");

directivesModule.directive('addFilter', function() {
return {
    restrict:'A',
    scope: {
        criterion: '@',
        value: '@',
        filter: '='
    },
    link:function(scope, element){

        element.bind('click', function() {
            scope.$apply(function() {
                scope.filter[scope.criterion] = scope.value;
            });
        });
    }
};
});

Upvotes: 1

laurent
laurent

Reputation: 2620

I am not sure to understand why you are watching a collection here

why not doing something like:

DirectivesModule.directive('filterBar', function() {
  return {
    restrict:'E',
    require:'^stTable',
    template: 'you template',
    scope: true,
    link:function(scope, element, attr, ctrl){
      scope.$watch(function () {
          return ctrl.tableState().search;
      }, function (newValue, oldValue) {
         if(newValue.predicateObject){
           console.log(newValue.predicateObject)
         }
      }, true);
    }
   };
});

Upvotes: 0

Related Questions