Question

我有多个选择下拉列表，这些下拉列表是从类别的JSON文件生成的。

我想使用用户在选择中做出的选择来过滤使用ng-repeat生成的应用列表。

我有这个plunker http://plnkr.co/edit/ipfVfH3pbLoYk1u4n3la?p=preview，它显示了生成的下拉菜单但是用户选择进入了一个对象，据我所知，你不能用它作为ng-repeat的过滤器。

是否可以使用它来过滤或者我可以转换它？

这来自我之前的帖子 - Dynamically create multiple dropdowns angularjs from a single JSON file

这是一个替代版本，单独呈现每个选择。它使用自定义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，则会抱怨无限$ digest循环。

那么可以使用输出（用户选择）作为重复的过滤器吗？

我需要使用的是选择用于过滤应用的类别的名称，因此如果应用没有标记他们选择的类别，那么它就不会显示。每个应用都可以添加下拉列表中可用的任何标记。

---添加信息---

显示的应用程序列表将在与上方和plunker中的过滤器相同的控制器中处理，它们将在同一视图中，查看我目前拥有的图像。模糊的东西需要保护。

http://i.imgur.com/1SxjxFC.jpg - 道歉，这不是让我获得更高质量的截图。

我目前对应用程序的重复是;

        <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中选择多个类别来过滤。我不能真正使用该组，因为利益相关者希望每个过滤器下拉列表都是分开的，然后允许用户选择多个类别来过滤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

我想你再次需要一个自定义过滤器。试着举例（再次使用underscore ）：

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

这适用于：

获取所选的categoryNames和
通过计算与所选类别的差异来过滤应用

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

使用NG-repeat上的对象作为过滤器

1 个答案: