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

【问题标题】：Using a object on NG-repeat as a filter使用 NG-repeat 上的对象作为过滤器
【发布时间】：2013-11-18 13:51:21
【问题描述】：

我有一个从 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 一起使用，angular 会报错 Infinite $digest Loop。

那么是否可以将输出（用户选择）用作重复的过滤器？

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

--- 补充信息 ---

显示的应用程序列表将在与上面的过滤器和 plunker 相同的控制器中处理，它们将在同一个视图中，请参阅我目前拥有的图像。为了保护而模糊了一些东西。

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>

Chosen 只是一个用来让多选看起来不错的插件。

他们可以点击显示的每个应用程序，它会为他们提供有关它的更多详细信息。每个应用程序都可以有 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 并从过滤器列表中删除一个类别时，它会删除由于该选择而显示的所有应用程序。有道理吗？

我认为这就是我需要提供的所有信息，如果他们还有更多我遗漏的信息，请告诉我。

【问题讨论】：

正如我在原始帖子的评论中所写，您将无法直接使用selected 作为过滤器值，因为它是一个对象。您能否添加要通过此选择过滤的数据类型？
@Yoshi - 刚刚在帖子末尾添加了一点。如果有意义，我需要使用选择的类别名称，而不是 categoryType 名称而是类别名称？
我认为仍然缺少一些重要信息。你提到的应用程序是什么？是否会在同一个视图中由同一个控制器处理？就目前而言，可以选择的不是单一类别，而是多个类别。
建议创建一个更简单的演示，其中包含您要过滤的数据......不太清楚这里的目标是什么
好的，我会进行更改并使其更清晰。感谢您的意见。

标签： javascript angularjs angularjs-ng-repeat angularjs-filter

【解决方案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

【讨论】：