1

我正在尝试编写自定义过滤器。它的目的是根据下拉菜单做三件事之一。它需要仅显示隐藏项、仅显示非隐藏项或所有项。

这是我的下拉菜单。

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

这是 ng-repeat 和 filter 的 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;
 };
});

我无法弄清楚如何使下拉菜单更改此过滤器的显示内容，我们将不胜感激。

编辑——一旦我正确地传递了属性，我就开始得到不同的结果。all 和 hidden 选项现在仅显示非隐藏项，显示的选项仅显示隐藏项。仍然不确定我哪里出错了。

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

4

1 回答 1

2

为您修复了代码。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;
    };
});
于 2013-09-03T19:59:40.403 回答