Динамически создавать несколько раскрывающихся ангаляров из одного файла JSON

Question

У меня есть список категорий, и в каждом категории есть список категорий, и я отображаю их в раскрывающемся списке, из которого пользователь может выбрать несколько элементов, и сделанные варианты будут отфильтровать, какие приложения показаны в представлении (это внутренний дом магазин приложений)

Это файл JSON, с которым я работаю.

{"type": "Category", "id": 1181, "CategoryType": {"id": 1180, "name": "Technology"}, "name": "spotfire"}, {"Тип": «Категория», «id»: 1182, «CategoryType»: {«id»: 1180, «Имя»: «Технология»}, «Имя»: «PipelInp»}, {"Тип": "Категория", "ID ": 1184," CategoryType ": {" id ": 1183," name ":" Категория "}," Имя ":" IBSI "}, {" Тип ":" Категория "," ID ": 1185," Категория ": {" id ": 1183," name ":" Category "}," name ":" clin "}, {" type ":" Категория "," ID ": 1187," CategoryType ": {" ID " : 1186, «Имя»: «Возможности»}, «Имя»: «Химия»}, {«Тип»: «Категория», «ID»: 1188, «Категориятип»: {«ID»: 1183, «Имя» : «Категория»}, «Имя»: «Ключевые лидеры мнений»}, {"type": "Категория", "ID": 1189, "Категориятип": {"ID": 1183, "Имя": "Категория" }, "name": "pnts"}, {"type": "Категория", "ID": 1190, "CategoryType": {"id": 1183, "name": "Категория"}, "Имя": "CI"}, {"type": "Категория", "ID": 1191, "CategoryType": {"id": 1180, "имя": "Технология"}, "Имя": "VantageP"}, {{ «Тип»: «Категория», «ID»: 1192, «Категориятип»: {«id»: 1183, «Имя»: «Категория»}, «Имя»: «Targets»}, {"Тип": "Категория "," id ": 1193," CategoryType ": {" id ": 1186," имя ":" Capab ilility "}," name ":" Information Science "}, {" type ":" Категория "," ID ": 1194," CategoryType ": {" ID ": 1186," имя ":« Возможность »},", ",", ",", ",", "," Имя ":" dmp "}, {" type ":" Категория "," ID ": 1195," CategoryType ": {" ID ": 1180," Имя ":" Технология "}," Имя ":" Spotfire Web Игрок "}, {" type ":" Категория "," ID ": 1196," CategoryType ": {" id ": 1186," имя ":" Возможности "}," Имя ":« Предсказатели "}, {" Тип ":" Категория "," ID ": 1198," CategoryType ": {" id ": 1197," name ":" function "}," name ":" Pharmd "}, {" Тип ":" Категория " , "id": 1199, "CategoryType": {"id": 1197, "name": "function"}, "name": "im - cv/gi"}, {"type": "Категория", " ID ": 1200," CategoryType ": {" id ": 1180," name ":" Technology "}," name ":" Мобильные приложения "}, {" Тип ":" Категория "," ID ": 1201, «CategoryType»: {"id": 1197, "name": "function"}, "name": "rapide"}, {"type": "Категория", "ID": 1202, "CategoryType": {" id ": 1197," name ":" function "}," name ":" im - oncology "}, {" type ":" Категория "," ID ": 1203," CategoryType ": {" 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 непосредственно угловой будет жаловаться на Бесконечный $ 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