Special filters in angularJS

The 'new' way of filtering in angularJS since version 1.idontknow. There're some kind of special ways.

by Christoph BĂĽhler

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div ng-app="testApp">
    <div ng-controller="excludeInactiveCtrl">
         <h4>exclude inactive?</h4>
        only show active: <input type="checkbox" ng-model="showActive" /> ngmodel value: {{showActive}}
        <table class="table table-condensed table-hover">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Active</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="o in data | filter:{active:showActive}">
                    <td>{{o.name}}</td>
                    <td>{{o.active}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div ng-controller="activeOrNotCtrl" ng-init="showActive = true">
         <h4>Are you active?</h4>
        toggle active: <input type="checkbox" ng-model="showActive" /> ngmodel value: {{showActive}}
        <table class="table table-condensed table-hover">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Active</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="o in data | onlyBooleanValueFilter:showActive">
                    <td>{{o.name}}</td>
                    <td>{{o.active}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div ng-controller="togglableFilterCtrl" ng-init="showActive = true">
         <h4>deactivate the filter.</h4>
        toggle filter: <input type="checkbox" ng-model="filterActive" /> ngmodel value: {{filterActive}}<br/>
        filter text: <input type="text" ng-model="filtertext" /> ngmodel value: {{filtertext}}
        <table class="table table-condensed table-hover">
            <thead>
                <tr>
                    <th>Name</th>
    ...

CSS

body {
    padding:20px;
}

JavaScript

angular.module('testApp', []).
controller('excludeInactiveCtrl', ['$scope', function ($scope) {
    //example 1 just normal filtering on boolean value
    $scope.data = [{name:'Name1',active:true},
                   {name:'Name2',active:false},
                   {name:'Name3',active:true},
                   {name:'Name4',active:false},
                   {name:'Name5',active:true}];
}]).



filter('onlyBooleanValueFilter', [function(){
    return function(input, param){
        var ret = [];
        if(!angular.isDefined(param)) param = true;
        angular.forEach(input, function(v){
            if(angular.isDefined(v.active) && v.active === param){
                ret.push(v);
            }
        });
        return ret;
    };
}]).
controller('activeOrNotCtrl', ['$scope', function ($scope) {
    //example 2 with custom filter so that only true or only false values are shown
    $scope.data = [{name:'Name1',active:true},
                   {name:'Name2',active:false},
                   {name:'Name3',active:true},
                   {name:'Name4',active:false},
                   {name:'Name5',active:true}];
}]).



filter('togglableFilter',[function(){
    return function(input, filterText, isFilterActive){
        if(!angular.isDefined(isFilterActive) || !isFilterActive) return input;
        var ret = [];
        if(angular.isDefined(filterText) && angular.isString(filterText)){
            angular.forEach(input, function(v){
                if(v.name.indexOf(filterText) !== -1){
                    ret.push(v);
                }
            });
        }
        return ret;
    }
}]).
controller('togglableFilterCtrl', ['$scope', function ($scope) {
    //example 3 with deactivatable text filter
    $scope.data = [{name:'Name1',active:true},
                   {name:'Name2',active:false},
                   {name:'Name3',active:true},
                   {name:'Name4',active:false},
                   {name:'Name5',active:true}];
}]);