Crear dinámicamente múltiples desplegables AngularJS a partir de un solo archivo JSON

Question

Tengo una lista de types de categorías y cada categoryType tiene una lista de categorías dentro de ellas y las estoy mostrando en un menú desplegable de los que el usuario puede seleccionar múltiples elementos y las opciones realizadas filtrarán qué aplicaciones se muestran en la vista (esta es un Inhouse tienda de aplicaciones)

Este es el archivo JSON con el que estoy trabajando.

{"tipo": "categoría", "id": 1181, "categoryType": {"id": 1180, "nombre": "tecnología"}, "nombre": "spotfire"}, {"type": "Categoría", "id": 1182, "CategoryType": {"id": 1180, "Nombre": "Tecnología"}, "Nombre": "Pipelinp"}, {"Tipo": "Categoría", "Id ": 1184," CategoryType ": {" id ": 1183," Nombre ":" Categoría "}," Nombre ":" Ibsi "}, {" Tipo ":" Categoría "," Id ": 1185," CategoryType ": {" id ": 1183," nombre ":" categoría "}," nombre ":" clin "}, {" tipo ":" categoría "," id ": 1187," categoryType ": {" id " : 1186, "nombre": "capacidad"}, "nombre": "química"}, {"tipo": "categoría", "id": 1188, "categoryType": {"id": 1183, "nombre" : "Categoría"}, "Nombre": "Líderes de opinión clave"}, {"Tipo": "Categoría", "Id": 1189, "CategoryType": {"Id": 1183, "Nombre": "Categoría" }, "nombre": "pnts"}, {"tipo": "categoría", "id": 1190, "categoryType": {"id": 1183, "nombre": "categoría"}, "nombre": "Ci"}, {"tipo": "categoría", "id": 1191, "CategoryType": {"id": 1180, "Nombre": "Tecnología"}, "Nombre": "Vantagep"}, { "Tipo": "Categoría", "Id": 1192, "CategoryType": {"id": 1183, "Nombre": "Categoría"}, "Nombre": "Objetivos"}, {"Tipo": "Categoría "," id ": 1193," CategoryType ": {" id ": 1186," Nombre ":" Capab ity "}," nombre ":" ciencia de la información "}, {" tipo ":" categoría "," id ": 1194," categoryType ": {" id ": 1186," nombre ":" capacidad "},", "," nombre ":" dmp "}, {" tipo ":" categoría "," id ": 1195," CategoryType ": {" id ": 1180," Nombre ":" Tecnología "," Nombre ":" Spotfire Web Player "}, {" tipo ":" categoría "," id ": 1196," categoryType ": {" id ": 1186," nombre ":" capacidad "}," nombre ":" predictivos "}, {" tipo ":" categoría "," id ": 1198," categoryType ": {" id ": 1197," nombre ":" función "}," nombre ":" pharmd "}, {" type ":" categoría " , "id": 1199, "categoryType": {"id": 1197, "nombre": "función"}, "nombre": "im - cv/gi"}, {"tipo": "categoría", "," id ": 1200," CategoryType ": {" id ": 1180," Nombre ":" Tecnología "}," Nombre ":" Aplicaciones móviles "}, {" Tipo ":" Categoría "," Id ": 1201, "CategoryType": {"id": 1197, "Nombre": "Función"}, "Nombre": "Rapide"}, {"Tipo": "Categoría", "Id": 1202, "CategoryType": {" id ": 1197," Nombre ":" Función "}," Nombre ":" IM - Oncología "}, {" Tipo ":" Categoría "," Id ": 1203," CategyType ": {" Id ": 1186 , "Nombre": "Capacidad"}, "Nombre": "Clin"}

Pero debido a que un administrador puede agregar types y categorías de categorías a cualquier tipo, los desplegables deben ser creados dinámicamente a medida que estaban codificados. Debe haber un nuevo menú desplegable para cada tipo de categoría.

Entonces, lo que pude hacer fue tener todas las categorías mostradas en un desplegable agrupado por tipo de categoría con esto;

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

Creé la fábrica para obtener las categorías;

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

El controlador se ve así;

$scope.myCategories = [];

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

Entonces, por ejemplo, tome la primera línea del JSON.

La categoría de 'SpotFire' está en la categoría de 'Tecnología'.

Entonces, para esa categoría Type, necesitaría el menú desplegable de la tecnología que muestra al menos SpotFire + cualquier otra cosa que se analice en el archivo JSON que está en esa categoría.

Luego, otro menú desplegable para el siguiente CategoryType, etc.

Answer 1

Aquí hay una versión alternativa que representa cada selección individualmente. Está usando una costumbre groupBy Filtro (usando guion bajo):

app.filter('groupBy', ['$parse', function ($parse) {
  return function groupByFilter(input, groupByExpr) {
    return _.groupBy(input, $parse(groupByExpr));
  };
}]);

con:

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

Desafortunadamente, el filtro debe aplicarse cuando cambia los datos,

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

Porque si se usa con ng-repeat directamente angular se quejará de un Infinite $ Digest Loop.

Manifestación: http://plnkr.co/edit/ipfvfh3pbloyk1u4n3la?p=preview

Por otro lado, dado sus requisitos, sería mucho más simple si su JSON ya estuviera estructurado de la manera que lo necesita (tipos de categorías con una lista de categorías infantiles, no al revés).

---

respuesta original:

Realmente no puedo imaginar tu diseño final, pero un punto de partida simple podría ser el group by característica de ng-options.

P.ej:

<select
  ng-model="selected"
  ng-options="c as c.name group by c.categoryType.name for c in categories track by c.id" 
></select>

Manifestación: http://plnkr.co/edit/ja8dspuvqmrhmkk9yn6r?p=preview