基于布尔值的AngularJS自定义过滤器

Question

我正在尝试编写自定义过滤器。它的目的是根据下拉菜单执行三项操作之一。它只需要显示隐藏的项目，只显示隐藏的项目或所有项目。

这是我的下拉菜单。

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

以下是ng-repeat和过滤器的HTML

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

这是自定义过滤器

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;
 };
});

我无法弄清楚如何让下拉菜单更改此过滤器显示的内容，我们将非常感谢任何帮助。

编辑 - 一旦我正确地传递了属性，我开始得到不同的结果。全部和隐藏选项现在仅显示非隐藏项目，显示的选项仅显示隐藏项目。还是不确定我哪里出错了。

编辑2 - 试图在这里制作一个jsfiddle http://jsfiddle.net/mindstormy/RVB8A/1/

Answer 1

为您修复了代码。 的 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;
    };
});