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

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

这是我的下拉菜单

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

我很难弄清楚如何使下拉菜单更改此过滤器显示的内容，如有任何帮助，将不胜感激

编辑-- 一旦我正确地传递了属性，我就开始得到不同的结果。“全部”和“隐藏”选项现在仅显示非隐藏项，而“显示”选项仅显示隐藏项。我仍然不确定我会错在哪里

编辑2-- 尝试在此处为其创建JSFIDLE

修复了代码

全部的
隐藏的
展示
{{item.name}，{{item.hidden}
var-app=angular.module（'app'，[]）；
app.controller（'exampleCtrl'，函数（$scope）{
$scope.items=[{
名称：“Foobar”，
隐藏：真的
}, {
名称：“Foobar”，
隐藏：假
}, {
名称：'Barfoo'，
隐藏：真的
}, {
名称：'Barfoo'，
隐藏：假
}, {
名称：“FB”，
隐藏：假
}];
$scope.itemfilter={}；
$scope.itemfilter.hidden=“全部”；
});
app.filter（'hiddenFilter'，函数（）{
返回函数（项目、显示或隐藏、属性）{
var shownItems=[]；
如果（显示或隐藏=='all'）返回项目；
角度。forEach（项目、功能（项目）{
如果（显示或隐藏=='显示'）{
如果（项[属性]==true）shownItems.push（项）；
}否则{
如果（项[属性]！==true）shownItems.push（项）；
}
});
返回shownItems；
};
});

属性没有设置吗？像这样？hiddenFilter:“hidden”：itemfilter.hidden其中“hidden”是正在测试的布尔值？返回函数中有三个参数：items、show\u或\u hide和attribute。不过，您只传递了两个过滤器：items和itemfilter.hidden。您没有传递属性1。啊，现在更有意义了。它有用吗？你能接一个JSFIDLE吗？还不能用，但我快到了。我将尝试制作一把小提琴，以前从未制作过，所以可能需要一些时间。

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

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