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

Question

我有一个 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,"name":"Capability"},"name":"Chemistry"},{"type":"category","id":1188,"categoryType":{"id":1183, "名称":"类别"},"名称":"键 观点 领导者"},{"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","id":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":"Technology"},"name":"Spotfire 网络 播放器"},{"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 应用程序"},{"type":"category","id":1201,"categoryType":{"id":1197,"name":"Function"},"name":"RAPIDE"},{" type":"category","id":1202,"categoryType":{"id":1197,"name":"Function"},"name":"iM - 肿瘤学"},{"type":"category","id":1203,"categoryType":{"id":1186,"name":"Capability"},"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' 中。

因此，对于该类别类型，我需要技术下拉列表，该下拉列表至少显示了 spotfire + 在该类别类型中的 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 一起使用，angular 会报错 Infinite $digest Loop。

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

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

---

原答案：

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

例如：

<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