Crie dinamicamente múltiplos suspensos AngularJs a partir de um único arquivo JSON

Question

Eu tenho uma lista de categorias e cada categorytype tem uma lista de categorias dentro deles e estou exibindo -os em um menu suspenso do qual o usuário pode selecionar vários itens e as opções feitas filtrarão quais aplicativos são mostrados na visualização (este é um Inhouse loja de aplicativos)

Este é o arquivo json que estou trabalhando.

{"type": "categoria", "id": 1181, "categorytype": {"id": 1180, "nome": "tecnologia"}, "name": "spotfire"}, {"tipo": "Categoria", "ID": 1182, "CategoryType": {"ID": 1180, "Nome": "Technology"}, "Name": "Pipelinp"}, {"Type": "Category", "ID ID ": 1184," categorytype ": {" id ": 1183," nome ":" categoria "}," nome ":" ibsi "}, {" type ":" categoria "," id ": 1185," categorytypepe ": {" id ": 1183," nome ":" categoria "}," nome ":" clin "}, {" type ":" categoria "," id ": 1187," categorytype ": {" id " : 1186, "nome": "capacidade"}, "nome": "química"}, {"type": "categoria", "id": 1188, "categorytype": {"id": 1183, "nome" : "Categoria"}, "nome": "líderes de opinião -chave"}, {"tipo": "categoria", "id": 1189, "categorytype": {"id": 1183, "nome": "categoria" }, "nome": "PNTs"}, {"type": "categoria", "id": 1190, "categorytype": {"id": 1183, "nome": "categoria"}, "nome": "Ci"}, {"type": "categoria", "id": 1191, "categorytype": {"id": 1180, "name": "Technology"}, "nome": "vantagep"}, {{ "TIPO": "Categoria", "ID": 1192, "CategoryType": {"ID": 1183, "Nome": "Categoria"}, "Nome": "Targets"}, {"Type": "Category" "," ID ": 1193," CategoryType ": {" ID ": 1186," Nome ":" Capab iva "}," nome ":" Information Science "}, {" tipo ":" categoria "," id ": 1194," categorytype ": {" id ": 1186," nome ":" capacidade "}," nome ":" dmp "}, {" type ":" categoria "," id ": 1195," categorytype ": {" id ": 1180," name ":" Technology "}," nome ":" spotfire webire Player "}, {" type ":" categoria "," id ": 1196," categorytype ": {" id ": 1186," nome ":" capacidade "}," nome ":" preditivos "}, {" TIPO ":" Categoria "," ID ": 1198," CategoryType ": {" ID ": 1197," Nome ":" Função "}," Nome ":" Pharmd "}, {" Type ":" Category " , "id": 1199, "categorytype": {"id": 1197, "name": "function"}, "nome": "im - cv/gi"}, {"type": "categoria", " id ": 1200," categorytype ": {" id ": 1180," name ":" Technology "}," nome ":" aplicativos móveis "}, {" type ":" categoria "," id ": 1201, "categorytype": {"id": 1197, "nome": "function"}, "name": "rapide"}, {"type": "categoria", "id": 1202, "categorytype": {" id ": 1197," nome ":" function "}," nome ":" iM - oncologia "}, {" type ":" categoria "," id ": 1203," categorytype ": {" id ": 1186 , "nome": "capacidade"}, "nome": "clin"}

Mas como um administrador pode adicionar categorias e categorias a qualquer tipo, os suspensos precisam ser criados dinamicamente à medida que foram codificados. É preciso haver um novo suspenso para cada tipo de categoria.

Então, o que pude fazer foi ter todas as categorias mostradas em um suspensão agrupado por tipo de categoria com isso;

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

Eu criei a fábrica para obter as categorias;

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

O controlador se parece com isso;

$scope.myCategories = [];

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

Por exemplo, pegue a primeira linha do JSON.

A categoria de 'Spotfire' está na categoria 'tecnologia'.

Portanto, para esse categorytype, eu precisaria do suspensão da tecnologia que mostra pelo menos o Spotfire + o que for analisado no arquivo JSON nesse categorytype.

Em seguida, outro suspensão para o próximo categorytype e assim por diante.

Answer 1

Aqui está uma versão alternativa que renderiza cada uma delas selecionada individualmente. Está usando um personalizado groupBy filtro (usando sublinhado):

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

com:

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

Infelizmente, o filtro deve ser aplicado quando os dados mudarem,

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

Porque se usado com ng-repeat diretamente angular irá reclamar de um Loop infinito de $ Digest.

Demo: http://plnkr.co/edit/ipfvfh3pbloyk1u4n3la?p=preview

Por outro lado, dadas as suas necessidades, seria muito mais simples se o seu JSON já estivesse estruturado da maneira que você precisa (tipos de categoria com uma lista de categorias filhos, e não o contrário).

---

resposta original:

Eu realmente não posso imaginar seu layout final, mas um simples ponto de partida pode ser o group by característica de ng-options.

Por exemplo:

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

Demo: http://plnkr.co/edit/ja8dspuvqmrhmkk9yn6r?p=preview