AngularJS ngRepeat - Use checkbox to filter list by single object property

Question

JSFiddle: http://jsfiddle.net/ADukg/16923/ .

I'm trying to filter items in and out of a list where a value matches a particular property.

I have a 'shownEmployees' array, and when a 'Show Leavers?' checkbox is selected, I want the ng-repeat list to include objects where the 'leaver' property is 'Yes', otherwise, it should splice them. If the property is 'No', the object should always be included in the shownEmployees array.

I've done what should be more complex filters by multiple parameters using a $filter directive, but can't figure out a simpler way to filter only by the one property.

HTML:

<md-list-item ng-repeat="employee in allEmployees.shownEmployees | orderBy: sortEmployees | filter:searchEmployees">

<md-checkbox ng-change="allEmployees.showLeavers()" ng-model="allEmployees.filters.showLeavers">Show Leavers?</md-checkbox>

-

What I've tried to do in JS:

app.controller('allEmployeesController', function($scope, $http, $document) {

var _this = this;

$scope.sortEmployees = '+surname'

this.shownEmployees = $scope.employees;

this.filters = {
    showLeavers: false
}

console.log('Showing leavers?: ' + this.filters.showLeavers);

this.showLeavers = function() {

    console.log('Showing leavers?: ' + this.filters.showLeavers);

    angular.forEach($scope.employees, function(value, key) {
        if (value.leaver === 'Yes') {
            if (_this.filters.showLeavers) {
                _this.shownEmployees.push(value);
            } else {
                _this.shownEmployees.splice(value);
            }
        } 
        if (value.leaver === 'No') {
            _this.shownEmployees.push(value);
        }
    })

}

})

Answer 1

Use custom filter:

app.filter('myfilter', function() {
   return function( items, showLeavers) {
    var filtered = [];

    var show = (showLeavers) ? 'Yes' : 'No'

    angular.forEach(items, function(item) {
       if(show == item.leaver) {
          filtered.push(item);
        }       
    });

    return filtered;
  };
});

And:

 <li ng-repeat="employee in shownEmployees | myfilter:showLeavers">

---

Demo Fiddle

Answer 2

You need to do some changes in your code. Please try this below code and take a look and compare with your code.

 var app = angular.module('myApp',[]); app.controller('mainController', function($scope) { var scope = $scope; $scope.showLeaver=false; scope.employees = [ { name: 'Employee One', leaver: 'No' }, { name: 'Employee Two', leaver: 'No' }, { name: 'Employee Three', leaver: 'Yes' } ] $scope.shownEmployees = $scope.employees; $scope.showLeavers = function() { var isYes = $scope.showLeaver == true? 'Yes':'No'; $scope.shownEmployees = $scope.employees.filter(function (el) { return el.leaver == isYes }); } $scope.showLeavers(); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="mainController"> <input ng-click="showLeavers()" ng-model="showLeaver" value="" type="checkbox" /> <label for="showLeavers">Show Leavers?</label> <ul> <li ng-repeat="employee in shownEmployees"> <p>Name: {{employee.name}}</p> </li> </ul> </div> 

Answer 3

you should change function js

 this.showLeavers = function(item) {
      this.shownEmployees = [];
            if(item){
            angular.forEach($scope.employees , function(list){
            if(list.leaver === 'Yes')
            this.shownEmployees.push(list);
          })
        }else{
            this.shownEmployees = angular.copy($scope.employees);
        }
    }

and html

<input ng-change="showLeavers(allEmployees.filters.showLeavers)" ng-model="allEmployees.filters.showLeavers" type="checkbox" id="showLeavers">

Answer 4

Update:

Fixed it using method below. When checkbox selected, shows leavers and non-leavers. When not selected, shows only non-leavers. No ng-hide expression, no use of controller. Method independent in $filter directive.

showLeaver expression passed in as parameter to showLeavers filter.

HTML:

<md-list-item ng-repeat="employee in employees | orderBy: sortEmployees | filter: searchEmployees | showLeavers:showLeaver">

<md-checkbox ng-model="showLeaver">Show Leavers?</md-checkbox>

JS:

app.filter('showLeavers', function() {
  return function (employees, showLeaver) {
    var matches = [];

    for (var i = 0; i < employees.length; i++) {

      if (employees[i].leaver === 'No') {
        matches.push(employees[i]);
      }

      if (employees[i].leaver === 'Yes' && showLeaver) {
        matches.push(employees[i]);
      } else if (employees[i].leaver === 'Yes' && showLeaver == false) {
        matches.splice(employees[i]);
      }

    }

    return matches;

  }
})