我有categoryTypes的列表，每个categoryType具有在其中的类别列表和我在一个下拉列表，用户可以选择多个项目，并提出将过滤在视图中显示哪些应用程序的选择显示它们（这是一个室内的appstore）

I have a list of categoryTypes and each categoryType has a list of categories within them and i am displaying them in a dropdown which the user can select multiple items from and the choices made will filter what apps are shown in the view (this is an inhouse appstore)

这是一起工作的JSON文件IM。

This is the JSON file im working with.

[{\"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,\"name\":\"Category\"},\"name\":\"Key  意见  Leaders\"},{\"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\":\"Capability\"},\"name\":\"Information  Science\"},{\"type\":\"category\",\"id\":1194,\"categoryType\":{\"id\":1186,\"name\":\"Capability\"},\"name\":\"DMP\"},{\"type\":\"category\",\"id\":1195,\"categoryType\":{\"id\":1180,\"name\":\"Technology\"},\"name\":\"Spotfire  卷筒纸  Player\"},{\"type\":\"category\",\"id\":1196,\"categoryType\":{\"id\":1186,\"name\":\"Capability\"},\"name\":\"$p$pdictiveS\"},{\"type\":\"category\",\"id\":1198,\"categoryType\":{\"id\":1197,\"name\":\"Function\"},\"name\":\"PharmD\"},{\"type\":\"category\",\"id\":1199,\"categoryType\":{\"id\":1197,\"name\":\"Function\"},\"name\":\"iM   - CV / GI}，{类型：类别，ID：1200，categoryType：{ID：1180年，名：技术}，名：手机  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\":\"Capability\"},\"name\":\"Clin\"}]

[{"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,"name":"Category"},"name":"Key Opinion Leaders"},{"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":"Capability"},"name":"Information Science"},{"type":"category","id":1194,"categoryType":{"id":1186,"name":"Capability"},"name":"DMP"},{"type":"category","id":1195,"categoryType":{"id":1180,"name":"Technology"},"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":"Capability"},"name":"Clin"}]

但因为管理员可以添加categoryTypes和类别任何类型的下拉菜单需要动态创建为他们很难codeD。需要有每个类别键入一个新的下拉列表。

But because an admin can add categoryTypes and categories to any type the dropdowns need to be dynamically created as they were hard coded. There needs to be a new dropdown for each Category Type.

所以我能够做的就是按类别与类型分组这个下拉列表1显示了所有类别;

So what i was able to do was have all categories shown in one dropdown grouped by category type with this;

<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">

我创建的工厂拿到的类别;

I created the factory to get the categories;

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

控制器看起来像这样;

The controller looks like this;

$scope.myCategories = [];

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

因此​​，例如采取JSON的第一行。

So for example take the first line of the JSON.

的'Spotfire中的类别是在categoryType技术。

The the category of 'Spotfire' is in the categoryType 'Technology'.

因此​​，对于categorytype我需要技术的下拉菜单，显示至少Spotfire中+其他任何的JSON文件在categoryType被解析。

So for that categorytype i would need the dropdown of technology which shows at least spotfire + whatever else is parsed in the JSON file being in that categoryType.

接着另一个下拉为下categoryType等

Then another dropdown for the next categoryType and so on.

推荐答案

下面是另一个版本的呈现每个单独选择。它使用一个自定义的 GROUPBY 过滤器（使用下划线）：

Here's an alternate version rendering each select individually. It's using a custom groupBy filter (using 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>

不幸的是，过滤器已被应用时，数据的变化，

Unfortunately the filter has to be applied when the the data changes,

$scope.$watchCollection('categories', function (categories) {
  $scope.groupedCategories = groupByFilter(categories, 'categoryType.name');
});

因为如果使用与 NG-重复直接角会抱怨一个的 $无限循环消化的

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

在另一方面，考虑你的要求，这将是一个简单得多，如果你的JSON应该已经被结构化你需要它（类类型的子类，而不是其他方式列表）的方式。

On the other hand, given your requirements, it would be a lot simpler if your json would already be structured the way you need it (category types with a list of child-categories, not the other way around).

的原来的答案的：

我真的不能想象你的​​最终布局，但一个简单的出发点可能是通过的 NG-选项 。

I can't really picture your final layout, but a simple starting point could be the group by feature of 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