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

Question

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

这是json文件即时处理。

{“ type”：“类别”，“ ID”：1181，“ categoryType”：{“ id”：1180，“ name”：“ technology”}，“ name”：“ spotfire”}，{type'：“ type”： “类别”，“ ID”：1182，“ categoryType”：{“ id”：1180，“ name”：“ Technology”}，“ name”：“ pipelinp”}，{“类型”：“类别”，“ ID”，“ ID “：1184，“ categoryType”：{“ id”：1183，“ name”：“ category”}，“ name”：“ ibsi”}，{“ type”：“ category”：“ category”，“ id”：1185，“ categoryTypepe” “：{“ id”：1183，“ name”：“ cattory”}，“ name”：“ clin”}，{“ type”：“ category”，“ id”，“ id”：1187，“ categoryType”：{“ id”：{“ id” ：1186，“名称”：“功能”}，“名称”：“化学”}，{“ type”：“ category”，“ id”：1188，“ categoryType”：{“ ID”：1183，“名称” ：“类别”}，“名称”：“关键意见领导者”}，{“ type”：“ category”，“ id”：1189，“ categoryType”：{“ id”：1183：1183，“ name”：“ category”：“ category” }，“ name”：“ pnts”}，{“ type”：“ category”，“ id”：1190，“ categoryType”：{“ id”：1183，“ name”：“ category”：“ category”}，“ name”：： “ ci”}，{“ type”：“ category”，“ id”：1191，“ categoryType”：{“ id”：1180，“ name”：“ technoligh”}，“ name”：“ vantage”}，{ “ type”：“类别”，“ ID”：1192，“ categoryType”：{“ id”：1183，“ name”：“ category”}，“ name”：“ targets”}，{“ type”：“类别”： “，“ id”：1193，“ categoryType”：{“ id”：1186，“ name”：“ capab ISILIL“}，“名称”：“信息科学”}，{“ type”：“ category”，“ id”：1194，“ categoryType”：{“ id”：1186，“ name”：“能力”：“能力”}，“}，”，“名称“：“ dmp”}，{“ type”：“ cattory”，“ id”：1195，“ categoryType”：{“ id”：1180，“名称”：“技术”}，“ name”：“ Spotfire Web：” player“}，{“ type”：“ category”，“ id”：1196，“ categoryType”：{“ id”：1186，“ name”：“功能”：“功能”}，“ name”：“ prepplionives”}，{ type“：“ category”，“ id”：1198，“ categoryType”：{“ id”：1197，“ name”：“ function”：“ function”}，“ name”：“ pharmd”}，{“ type”：“ category”：“ category” ，“ id”：1199，“ categoryType”：{“ id”：1197，“ name”：“ function”}，“ name”：“ im -cv/gi”}，{“ type”：“类别”，“，”，“” id“：1200，“ categoryType”：{“ id”：1180，“ name”：“ Technology”}，“ name”：“移动应用程序”}，{“ type”：“ category”，“ id”，“ id”：1201， “ categoryType”：{“ id”：1197，“ name”：“ function”}，“ name”：“ rapide”}，{“ type”：“ category”，“ category”，“ id”：1202，“ categoryType”：{ id“：1197，“ name”：“ function”}，“ name”：“ im - oncology”}，{“ type”：“ category”，“ category”，“ id”：1203，“ categoryType”：{“ id”：{“ id”：1186 ，“名称”：“功能”}，“名称”：“ Clin”}]

但是，由于管理员可以在任何类型的类型中添加类别类型和类别，因此需要在硬编码的情况下动态创建下拉列表。每个类别类型都需要有一个新的下拉列表。

因此，我能够做的是将所有类别显示为一个类别类型的下拉列表中显示的所有类别；

<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”的类别在类别“技术”中。

因此，对于该类别类型，我将需要技术下拉，该下载至少显示了Spotfire + JSON文件中所述的其他内容。

然后是下一个类别类型等的另一个下拉列表。

Answer 1

这是一个备用版本，单独渲染每个选择。它正在使用自定义 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 直接的角度会抱怨 无限$摘要循环.

演示： 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