1

カスタムフィルターを作成しようとしています。その目的は、ドロップダウン メニューに基づいて 3 つのことのいずれかを行うことです。非表示のアイテムのみを表示するか、非表示のアイテムのみを表示するか、すべてのアイテムを表示する必要があります。

これが私のドロップダウンメニューです。

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

ドロップダウン メニューでこのフィルターの表示内容を変更する方法がわかりません。お役に立てば幸いです。

編集 -- 属性を正しく渡すと、異なる結果が得られるようになりました。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 に答える