Question

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

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

[{ “类型”： “类别”， “ID”：1181， “categoryType”：{ “ID”：1180， “姓名”： “技术”}， “名称”： “Spotfire中”}，{”类型 “：” 类别”， “ID”：1182， “categoryType”：{ “ID”：1180年， “名”： “技术”}， “名”： “PipelinP”}，{ “类型”： “类别” ， “ID”：1184， “categoryType”：{ “ID”：1183， “名”： “类别”}， “名”： “IBSI”}，{ “类型”： “类别”， “ID”：1185 “categoryType”：{ “ID”：1183， “名”： “类别”}， “名”： “临床”}，{ “类型”： “类别”， “ID”：1187， “categoryType”：{ “ID”：1186， “姓名”： “能力”}， “名称”： “化学”}，{ “类型”： “类别”， “ID”：1188， “categoryType”：{ “ID”：1183， “名”：“类别”}，“名”：“关键意见领导者 “}，{” 类型 “：” 类别 “ ”ID“：1189， ”categoryType“：{ ”ID“：1183， ”名“： ”类别“}， ”名“： ”PNTS“}，{”类型 “：” 类别”， “ID”：1190， “categoryType”：{ “ID”：1183， “名”： “类别”}， “名”： “CI”}，{ “类型”： “类别” ， “ID”：1191， “categoryType”：{ “ID”：1180年， “名”： “技术”}， “名”： “VantageP”}，{ “类型”： “类别”， “ID”：1192 “categoryType”：{ “ID”：1183， “名”： “类别”}， “名”： “目标”}，{ “类型”： “类别”， “ID”：1193， “categoryType”：{ “ID”：1186， “名”： “能力”}， “名”：“信息科学 “}，{” 类型 “：” 类别 “ ”ID“：1194， ”categoryType“：{ ”ID“：1186， ”名“： ”能力“}， ”名“： ”DMP“}，{”类型 “：” 类别 “ ”ID“：1195， ”categoryType“：{ ”ID“：1180年， ”名“： ”技术“}， ”名“：” Spotfire中卷筒纸播放 “}，{” 类型 “：” 类别 “ ”ID“：1196， ”categoryType“：{ ”ID“：1186， ”名“： ”能力“}， ”名“： ”PredictiveS“}，{”类型 “：” 类别”， “ID”：1198， “categoryType”：{ “ID”：1197， “名”： “功能”}， “名”： “药学博士”}，{ “类型”： “类别” ， “ID”：1199， “categoryType”：{ “ID”：1197， “名”： “功能”}， “名”：“IM - CV / GI“}，{”type“：”category“，”id“：1200，”categoryType“：{”id“：1180，”name“：”Technology“}，”name“：”Mobile“ 应用 “}，{” 类型 “：” 类别 “ ”ID“：1201， ”categoryType“：{ ”ID“：1197， ”名“： ”功能“}， ”名“： ”RAPIDE“}，{”类型 “：” 类别 “ ”ID“：1202， ”categoryType“：{ ”ID“：1197， ”名“： ”功能“}， ”名“：” IM - Oncology“}，{”type“：”category“，”id“：1203，”categoryType“：{”id“：1186，”name“：”Capability“}，”name“：”Clin“}] < / p>

但是因为管理员可以将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'中。

因此，对于该类别类型，我需要技术的下拉列表，该技术至少显示spotfire +在该categoryType中的JSON文件中解析的任何其他内容。

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

Answer 1

这是一个替代版本，单独呈现每个选择。它使用自定义groupBy过滤器（使用underscore）：

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一起使用，则会抱怨 Infinite $ digest Loop 。

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

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

原始回答：

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

E.g：

<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

从单个JSON文件动态创建多个下拉列表angularjs

1 个答案: