ng-repeat filter on boolean

Question

I am trying to filter on a boolean value in an ng-repeat.

List of unregistered users:

    <h3>Unregistered Users</h3>
    <div ng-repeat="user in users | filter:!user.registered">
        <div class="row-fluid">
        <div class="span2">
          {{user.name}}
        </div>
      </div>
    </div>

List of registered users:

    <h3>Registered Users</h3>
    <div ng-repeat="user in users | filter:user.registered">
        <div class="row-fluid">
        <div class="span2">
          {{user.name}}
        </div>
      </div>
    </div>

Is there a good way to filter based on registered and !registered.

Sauceda

Answer 1

filter by obj expression:

<h3>Unregistered Users</h3>
<div ng-repeat="user in users | filter:{registered:false}">
    <div class="row-fluid">
    <div class="span2">
      {{user.name}}
    </div>
  </div>
</div>

JSFiddle: http://jsfiddle.net/alfrescian/9ytDN/

Indicant

When I try this with AngularJS 1.2, the false expression only evaluates correctly if I quote it: filter:{registered:'false'} – Chrome

Looks like it doesn't work at all now in 1.2.2 (stringified or not), anyone can confirm? EDIT: nevermind, my problem is in filter on object iteration – Kaykaya

For nested objects the syntax changed from 1.2 to 1.3, see this answer https://mcmap.net/q/324035/-angular-1-3-filter-list-of-objects-with-array-attribute – Perianth

Answer 2

Create a method in the controller which returns true or false based on the logic you need and specify that function in the filter.

Something like this:

$scope.isRegistered = function(item) {
  return item.registered;
};

<h3>Unregistered Users</h3>
<div ng-repeat="user in users | filter:!isRegistered ">
    <div class="row-fluid">
    <div class="span2">
      {{user.name}}
    </div>
  </div>
</div>

Mohammed

Where is item supposed to be coming from? – Salty

@ZJRollyson item is the argument of the filter method idRegirstered(item). Filtering works by passing the user object to the filter method and evaluating the boolean return value. – Intercut

It is not possible to invert a filter method. You must do the inverting inside the filter method like this: $scope.isUnregistered = function(item) { return !item.registered ; } ; and use it like this filter: isUnregistered – Bummalo

Answer 3

In case an item does not have a boolean property set, you can find the item with a property not set to true by using '!' with quotes. e.x. filter: {property:'!'+true}.

Example:

$scope.users = [
        {
            name : 'user1 (registered)',
            registered : true
        },
        {
            name : 'user2 (unregistered)'
        },
        {
            name : 'user3 (registered)',
            registered : true
        },
         {
            name : 'user4 (unregistered)'
        }

To get unregistered users filter:

<h3>Unregistered Users</h3>
<div ng-repeat="user in users | filter:{registered:'!'+true}">
    <div class="row-fluid">
        <div class="span2">
          {{user.name}}
        </div>
      </div>
    </div>

Retreat

Answer 4

Had the same question. Alfrescian solution didn't work for me on Angular 1.1.5.

Found this fiddle: http://jsfiddle.net/buehler/HCjrQ/

.filter('onlyBooleanValueFilter', [function(){
    return function(input, param){
        var ret = [];
        if(!angular.isDefined(param)) param = true;
        angular.forEach(input, function(v){
            // 'active' is a hard-coded field name
            if(angular.isDefined(v.active) && v.active === param){
                ret.push(v);
            }
        });
        return ret;
    };
}])

You would need to adjust the code of the filter according to your field.

Cavitation

Answer 5

Slight modification to Websirnik's answer, this allows any column name for the dataset:

.filter('onlyBooleanValueFilter', [function () {
    return function (input, column, trueOrFalse) {
        var ret = [];

        if (!angular.isDefined(trueOrFalse)) {
            trueOrFalse = false;
        }

        angular.forEach(input, function (v) {
            if (angular.isDefined(v[column]) && v[column] === trueOrFalse) {
                ret.push(v);
            }
        });

        return ret;
    };
}])

Markup:

<div repeat="row in your.dataset | onlyBooleanValueFilter: 'yourColumn' : true"> 
     ...your stuff here....
</div>

Susann