Edit a filter with a simple checkbox

Question

I would like to make an option for showing inactive users by checking a button.

Here is the users array:

$scope.users = [
    {firstname: 'Paul', inactive: true},
    {firstname: 'Mark', inactive: false},
    {firstname: 'Maggie', inactive: false},                   
    {firstname: 'Lucy', inactive: true}
];

And the table to display it:

<table>
    <thead>
        <th>Firstname</th>
        <th>Activity</th>
    </thead>
    <tbody>
        <tr ng-repeat="user in users | filter: ??">
            <td>{{user.firstname}}</td>
            <td>{{user.inactive}}</td>
        </tr>
    </body>
</table>

<input type="checkbox" ng-click="showInact()">Show inactives

I'm learning AngularJS, I didn't found an interesting way to do that. Can you help me finding a solution?

Thanks :)

Answer 1

Just do this way:

1) At you controller:

$scope.showInactive = false;

$scope.filterInact = function(item)
{
    return item.inactive === $scope.showInactive;
};

$scope.showInact = function() {
   $scope.showInactive = !$scope.showInactive;
} 

2) Setup the filter:

 <tr ng-repeat="user in users | filter:filterInact">
    <td>{{user.firstname}}</td>
    <td>{{user.inactive}}</td>
  </tr>

Answer 2

Easiest Way !! You can set value of filter on click event.

<tr ng-repeat="user in users | filter:filters">
    <td>{{user.firstname}}</td>
    <td>{{user.inactive}}</td>
</tr>

on click filter set to check box

<input type="checkbox" ng-click="filters.inactive = true">

First, You need to set controller name instade of "myCtrl.js" whatever your controller name.

Answer 3

I personally like using a filter function to filter data. This approach is flexible and can easily interact with your other form variables. From the angular docs, the filter expression can be a:

function(value, index): A predicate function can be used to write arbitrary filters. The function is called for each element of array. The final result is an array of those elements that the predicate returned true for.

So an example filter function might look like this:

$scope.filterFunc = function (user) {
  //if the checkbox is checked show everyone, else only those that aren't inactive
  return $scope.showInactives  || !user.inactive;
};

And the HTML would be changed to accommodate the filter function. Specifically, I'm binding the checkbox to a $scope variable ($scope.showInactives) that the filterFunc function uses in its logic. And of course the ng-repeat is using the function called filterFunc.

<input type="checkbox" ng-model="showInactives"/>Show inactive users
<br/>
<table>
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Activity</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="user in users | filter:filterFunc">
        <td>{{user.firstname}}</td>
        <td>{{user.inactive}}</td>
      </tr>
    </tbody>
</table>

And if you need any other convoluted logic, the filter function allows you a lot of freedom. The only thing it needs to return is a boolean (true or false).

Demo.

Unrelated to filtering, I also had to fix the table's HTML by putting the <th> inside a table row <tr>.