Filtering with a checkbox

[AndrewIsh]

I have a column containing true/false values. I want to provide a checkbox filter to allow users to filter on, say, rows containing a true value in that column.

I tried changing the 'type' attribute to 'checkbox' but that caused the table to fail to render (no error). I then bound a checkbox to a model property and bound the 'value' attribute of the containing the st-search attribute to the same model property and, although i can see the value changing in the , the filtering is not being performed. Typing 'true' or 'false' in the textbox does perform the filtering.

Is what I'm trying to achieve possible?

[lorenzofox3]

I think the best way to do it is to create a custom plugin, something like

app.directive('customCheck', function () {
 return {
    restrict: 'E',
    scope: {
     predicate: '@'
    },
    require: '^stTable',
    template: '<input type="checkbox" ng-change="change()"/>',
    link: function (scope, element, attr, ctrl) {
     scope.change = function change () {
        ctrl.search(element[0].value, scope.predicate);
     }
    }
 }
});

which you would use

...
<th>
<custom-check predicate="myProp"></custom-check>
</th>
...

I have not actually tested it, so you might adjust a bit

[AndrewIsh]

Hi

Thanks for that, extremely useful. With a minor modification, it works perfectly :) Seems the ng-change necessitates an ng-model, which I'm then using in the search method instead of the element[0].value:

        return {
            restrict: 'E',
            scope: {
                predicate: '@'
            },
            require: '^stTable',
            template: '<input type="checkbox" ng-model="sel" ng-change="change()"/>',
            link: function (scope, element, attr, ctrl) {
                scope.change = function change () {
                    ctrl.search(scope.sel, scope.predicate);
                }
            }
        }

Many thanks for your help :)

[paviad]

I am using this solution and if the checkbox is selected, it only shows rows matching a 'true' value, as it should.

However, when the checkbox is deselected, instead of showing only rows matching a 'false' value, it shows all rows. Any idea why?

Thanks

[davidgrenier]

I don't understand the mechanism that makes ctrl.search work, where is search defined how does this get wired up to the data set?

Another thing is I had to do some pretty messed up things to get this working as expected without the directive be use-case specific... in particular I still have a problem where the scope still has the old value at the time change is called. Even the setTimeout doesn't work.

On the other hand, if I log scope.value and scope, I can see in the chrome log that scope.value contains the old value while after expanding scope I can see value has the new value.

It's as if change is called before angular propagates the model change.

.directive('customCheck', function () {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      predicate: '@',
      value: '=ngModel'
    },
    require: '^stTable',
    template: '<input type="checkbox" ng-change="change()"></input>',
    link: function (scope, element, attr, ctrl) {
      ctrl.search(scope.value, scope.predicate); // sets initial value
      scope.change = function change () {
        console.log(scope.value); // old value
        console.log(scope); // expanding this in the console will show value has the new value
        setTimeout(function () {
          ctrl.search(scope.value, scope.predicate); //old value
        }, 100)
      };
    }
  };
})

[will-janz]

I was having the same issue @paviad and @davidgrenier were having, and after a short bit of digging it seems the that StTable search mechanism will treat falsey search values as null. See the search function at the time of this comment.

Searching with a string 'false' will show only rows whos predicate matches false or 'false'.

.directive('stCheck', function () {
  return {
    restrict: 'E',
    scope: {
      predicate: '@'
    },
    require: '^stTable',
    template: '<input type="checkbox" data-ng-model="sel" ng-change="stCheckChange()"> ',
    link: function (scope, element, attr, ctrl) {
      scope.stCheckChange = function stCheckChange() {
        if (scope.sel) {
          ctrl.search(scope.sel, scope.predicate);
        } else {
          // SmartTable search mechanism will throw out the search term if it is falsey
          ctrl.search('false', scope.predicate);
        }
      };
    }
  };
})

[nrink-celect]

@will-janz - I've been searching all over for that simple solution