在NG-repeat上使用對象作為過濾器

Question

我有多個選擇下拉列表，這些下拉列表是根據類別的JSON文件生成的。

我想使用用戶在選擇中所做的選擇來篩選由ng-repeat生成的應用程序列表。

我有這個笨拙的人http://plnkr.co/edit/ipfVfH3pbLoYk1u4n3la?p=preview ，其中顯示了生成的下拉列表，但用戶選擇進入了一個對象，從我的得知，您不能將其用作ng-repeat的過濾器。

是否可以使用它來過濾或我可以轉換它？

這是來自我的較早的文章- 從單個JSON文件動態創建多個下拉Angularjs

這是一個替代版本，分別呈現每個選擇。 它使用自定義的groupBy過濾器（使用下划線）：

app.filter('groupBy', ['$parse', function ($parse) {
  return function groupByFilter(input, groupByExpr) {
    return _.groupBy(input, $parse(groupByExpr));
  };
}]);

與：

<div ng-repeat="(categoryTypeName, categories) in groupedCategories track by categoryTypeName">
  <label>{{categoryTypeName}}</label>

  <select
    ng-model="selected[categoryTypeName]"
    ng-options="c as c.name for c in categories track by c.id"
    multiple
  ></select>
</div>

不幸的是，當數據更改時必須應用過濾器，

$scope.$watchCollection('categories', function (categories) {
  $scope.groupedCategories = groupByFilter(categories, 'categoryType.name');
});

因為如果直接與ng-repeat一起使用，angular將抱怨無限$ digest循環。

那么是否可以將輸出（用戶選擇）用作重復項的過濾器？

我需要使用的是用於篩選應用程序的類別的名稱，因此，如果應用程序未使用他們選擇的類別進行標記，則它將不會顯示。 每個應用程序都可以添加下拉菜單中可用的任何標簽。

---補充信息-

顯示的應用列表將在與上方過濾器相同的控制器中以及在導航器中進行處理，並且它們將位於同一視圖中，請參閱我當前擁有的圖像。 模糊的東西可以保護。

http://i.imgur.com/1SxjxFC.jpg-抱歉，這並不會讓我獲得更高質量的屏幕截圖。

我目前對這些應用程式的ng重復是：

        <div class="col-md-4"
                            ng-repeat="app in objects | filter:query |orderBy:'-createdAt'">

查詢只是一個簡單的搜索輸入框。

要生成用戶可以從中進行多項選擇的下拉菜單，請使用此重復步驟；

<div ng-repeat="(categoryTypeName, categories) in groupedCategories track by categoryTypeName">
  <label>{{categoryTypeName}}</label>
<br>
  <select  class="form-control" multiple class="span4 chzn-select" chosen data-placeholder=" "
    ng-options="c as c.name for c in categories track by c.id"
    ng-model="selected[categoryTypeName]"

  ></select>

選擇只是一個插件，用於使多個選擇看起來不錯。

每個顯示的應用程序都可以單擊，它將為他們提供更多詳細信息。 每個應用程序可以具有1個或多個標簽，所有標簽都可以在生成的下拉菜單中進行過濾。

從發布的圖像中可以看到，用戶可以通過從所需的任何categoryTypes中選擇多個類別來進行過濾。 我不能真正使用group by，因為涉眾希望每個過濾器下拉列表都分開，然后允許用戶從1個或多個categoryTypes中選擇多個類別進行過濾。

我必須生成應用程序的控制器如下所示；

$scope.objects = [];


  $scope.getData = function (cb) {
            return appFactory.query(function (data) {
                $scope.objects = data;
                if (cb) cb();
            }, function(data) {
                alert("ERROR getting all applications");
            });
        };

$scope.getData();

var successCallback = function (e, cb) {
        alertService.add("success", "Success!");
        $scope.getData(cb);
    };

cb-只是在控制器中的成功回調

隨着工廠的發展；

.factory('appFactory', function ($resource) {
        return $resource(
                 'resources/appstore/applications/:id', 
            { id:'@id' }, 
            { 'update': { method: 'PUT'} }  
        );
    })

我想發生的是，隨着用戶選擇過濾器，就像angularjs文本搜索演示一樣，每次進行選擇時它都會過濾出應用程序，並且當用戶單擊x並從過濾器列表中刪除類別時，它將刪除所有應用程序由於該選擇而被顯示。 那有道理嗎？

我認為這就是我需要提供的所有信息，如果還有更多信息，我就省略了，請告訴我。

Answer 1

我認為您將為此再次需要自定義過濾器。 嘗試例如（ 再次使用下划線 ）：

app.filter('bySelectedCategories', [function () {
  return function bySelectedCategoriesFilter(input, selection) {
    var categoryNames = _.flatten(_.map(selection, function (categories) {
      return _.pluck(categories, 'name');
    }));

    return _.filter(input, function (app) {
      return _.difference(categoryNames, app.categoryNames).length === 0;
    });
  };
}]);

這是通過：

1. 獲取所選的categoryNames和
2. 通過計算與所選類別的差異來過濾應用

演示： http : //plnkr.co/edit/wAyfBgjLBSS0KcN008ru?p=preview