Custom Filter for AngularJS based on a boolean

Question

I am trying to write a custom filter. It's purpose is to do one of three things, based on a drop down menu. It needs to either show only hidden items, only notHidden items, or all items.

Here is my drop down menu.

<select class="span1" ng-model="itemfilter.hidden'">
  <option value="">All</option>
  <option value="hidden">Hidden</option>
  <option value="shown">Shown</option>
</select>

Here is the HTML for the ng-repeat and filter

<div ng-repeat="item in items | hiddenFilter:itemfilter.hidden:'hidden"> </div>

Here is the Custom Filter

app.filter('hiddenFilter', function($_ ) {
  return function( items, show_or_hide, attribute ) {
    var shownItems = [];
    $_.each(items, function(item) {
      if(show_or_hide === 'shown') {
        if (item[attribute] === true)
          shownItems.push(item);          
        } else{
          if (item[attribute] !== true)
            shownItems.push(item);          
      }
    });
  return shownItems;
 };
});

I am having trouble figuring out how to make the drop down menu change what this filter displays, any help would be greatly appreciated.

Edits -- Once I passed in the attribute correctly I started getting different results. The all and hidden options now show only nonHidden items, and the shown options shows only hidden items. Still not sure where I am going wrong.

Edit 2 -- Tried to make a jsfiddle for it here http://jsfiddle.net/mindstormy/RVB8A/1/

like this? hiddenFilter:'hidden':itemfilter.hidden Where 'hidden' is the boolean being tested? — Mindstormy
– Mindstormy, Commented Sep 3, 2013 at 15:48
you have three parameters in your return function: items, show_or_hide and attribute. You are only passing in two with the filter though: items, and itemfilter.hidden. You are not passing in an attribute one. — Mathew Berg
– Mathew Berg, Commented Sep 3, 2013 at 17:46
Ah, that makes more sense now. Does it work? Can you wire up a jsFiddle? — Mathew Berg
– Mathew Berg, Commented Sep 3, 2013 at 19:25
Doesn't work quite yet but I am close. I will try to get a fiddle created, never made one before so it might take some time. — Mindstormy
– Mindstormy, Commented Sep 3, 2013 at 19:30

zs2020 · Accepted Answer · 2013-09-03 19:59:40Z

Fixed the code for you. Working Demo

<div ng-app="app" ng-controller="exampleCtrl">
    <select class="span1" ng-model="itemfilter.hidden">
        <option value="all">All</option>
        <option value="hidden">Hidden</option>
        <option value="shown">Shown</option>
    </select>
    <div ng-repeat="item in items| hiddenFilter:itemfilter.hidden:'hidden'">{{item.name}}, {{item.hidden}}</div>
</div>

var app = angular.module('app', []);

app.controller('exampleCtrl', function ($scope) {
    $scope.items = [{
        name: 'Foobar',
        hidden: true
    }, {
        name: 'Foobar',
        hidden: false
    }, {
        name: 'Barfoo',
        hidden: true
    }, {
        name: 'Barfoo',
        hidden: false
    }, {
        name: 'FB',
        hidden: false
    }];
    $scope.itemfilter = {};
    $scope.itemfilter.hidden = "all";
});

app.filter('hiddenFilter', function () {
    return function (items, show_or_hide, attribute) {
        var shownItems = [];
        if (show_or_hide === 'all') return items;
        angular.forEach(items, function (item) {
            if (show_or_hide === 'shown') {
                if (item[attribute] === true) shownItems.push(item);
            } else {
                if (item[attribute] !== true) shownItems.push(item);
            }
        });
        return shownItems;
    };
});

Collectives™ on Stack Overflow

Custom Filter for AngularJS based on a boolean

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related