1

我有一个 categoryTypes 列表，每个 categoryType 都有一个类别列表，我在一个下拉列表中显示它们，用户可以从中选择多个项目，所做的选择将过滤视图中显示的应用程序（这是一个内部应用商店）

这是我正在使用的 JSON 文件。

[{"type":"category","id":1181,"categoryType":{"id":1180,"name":"Technology"},"name":"Spotfire"},{"type": "category","id":1182,"categoryType":{"id":1180,"name":"Technology"},"name":"PipelinP"},{"type":"category","id ":1184,"categoryType":{"id":1183,"name":"Category"},"name":"IBSI"},{"type":"category","id":1185,"categoryType ":{"id":1183,"name":"Category"},"name":"Clin"},{"type":"category","id":1187,"categoryType":{"id" :1186,"名称":"Capability"},"name":"Chemistry"},{"type":"category","id":1188,"categoryType":{"id":1183,"name":"Category"},"name ":"关键意见领袖"},{"type":"category","id":1189,"categoryType":{"id":1183,"name":"Category"},"name":"Pnts "},{"type":"category","id":1190,"categoryType":{"id":1183,"name":"Category"},"name":"CI"},{"type ":"category","id":1191,"categoryType":{"id":1180,"name":"Technology"},"name":"VantageP"},{"type":"category", “身份证”：1192，"categoryType":{"id":1183,"name":"Category"},"name":"Targets"},{"type":"category","id":1193,"categoryType":{" id":1186,"name":"能力"},"name":"信息科学"},{"type":"category","id":1194,"categoryType":{"id":1186, "name":"Capability"},"name":"DMP"},{"type":"category","id":1195,"categoryType":{"id":1180,"name":"技术"},"name":"Spotfire Web Player"},{"type":"category","id":1196,"categoryType":{"id":1186,"name":"Capability"},"name":"PredictiveS"},{"type":"category","id":1198,"categoryType":{"id":1197,"name":"Function"},"name":"PharmD" },{"type":"category","id":1199,"categoryType":{"id":1197,"name":"Function"},"name":"iM - CV/GI"}, {"type":"category","id":1200,"categoryType":{"id":1180,"name":"Technology"},"name":"Mobile Apps"},{"type": "category","id":1201,"categoryType":{"id":1197,"name":"Function"},"name":"RAPIDE"},{"type":"category","id ":1202,"categoryType":{"id":1197,"name":"Function"},"name":"iM - Oncology"},{"type":"category","id":1203,"categoryType":{"id" :1186,"name":"能力"},"name":"Clin"}]

但是因为管理员可以将 categoryTypes 和类别添加到任何类型，所以需要动态创建下拉列表，因为它们是硬编码的。每个类别类型都需要有一个新的下拉列表。

所以我能做的就是将所有类别显示在一个下拉列表中，按类别类型分组；

<select class="form-control"  multiple class="span4 chzn-select" chosen="myCategories" data-placeholder=" "  ng-model="c"  ng-options="c.name group by c.categoryType.name for c in myCategories">

我创建了工厂来获取类别；

.factory('categoryFactory', function ($resource) {
        return $resource(
                '/resources/appstore/categories'  
        );
    })

控制器看起来像这样；

$scope.myCategories = [];

  categoryFactory.query(function (d) {
            $scope.myCategories = d;
        });

因此，以 JSON 的第一行为例。

'Spotfire' 的类别在 categoryType 'Technology' 中。

所以对于那个categorytype，我需要技术的下拉列表，它至少显示spotfire +在那个categoryType的JSON文件中解析的任何其他内容。

然后是下一个 categoryType 的另一个下拉列表，依此类推。

4

1 回答 1

4

这是单独呈现每个选择的替代版本。它使用自定义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。

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

另一方面，考虑到您的要求，如果您的 json 已经按照您需要的方式构建（具有子类别列表的类别类型，而不是相反），那将会简单得多。

原始答案：

我无法真正描绘出您的最终布局，但一个简单的起点可能group by是ng-options.

例如：

<select
  ng-model="selected"
  ng-options="c as c.name group by c.categoryType.name for c in categories track by c.id" 
></select>

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

于 2013-11-07T12:53:53.650 回答