Crea dinamicamente più discese AngularJS da un singolo file JSON

Question

Ho un elenco di tipi di categorie e ogni tipo di categoria ha un elenco di categorie al loro interno e le sto visualizzando in un discesa da cui l'utente può selezionare più elementi e le scelte fatte filtrano quali app sono mostrate nella vista (questo è un interno app Store)

Questo è il file JSON con cui sto lavorando.

{"type": "categoria", "id": 1181, "categorytype": {"id": 1180, "nome": "tecnologia"}, "nome": "spotfire" {"type": "Categoria", "Id": 1182, "CategoryType": {"id": 1180, "nome": "tecnologia"}, "nome": "pipelinp"}, {"type": "categoria", "id" ": 1184," CategoryType ": {" id ": 1183," nome ":" categoria "}," nome ":" ibsi "}, {" type ":" categoria "," id ": 1185," categorytypee ": {" id ": 1183," nome ":" categoria "}," nome ":" clin "}, {" type ":" categoria "," id ": 1187," categorytype ": {" id " : 1186, "Nome": "Capacità"}, "Nome": "Chimica"}, {"Type": "Categoria", "Id": 1188, "CategoryType": {"Id": 1183, "Nome" : "Categoria"}, "Nome": "Key Opinion Leaders"}, {"Type": "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, "nome": "tecnologia"}, "nome": "vangep"}, { "type": "categoria", "id": 1192, "categoriaType": {"id": 1183, "nome": "categoria"}, "nome": "target"}, {"type": "categoria "," id ": 1193," CategoryType ": {" Id ": 1186," Nome ":" Capab ility "}," nome ":" scienza dell'informazione "}, {" type ":" categoria "," id ": 1194," categorytype ": {" id ": 1186," nome ":" capacità "}," Nome ":" dmp "}, {" type ":" categoria "," id ": 1195," categorytype ": {" id ": 1180," nome ":" tecnologia "}," nome ":" spotfire web Player "}, {" type ":" categoria "," id ": 1196," categorytype ": {" id ": 1186," nome ":" capacità "}," nome ":" predittivi "}, {" Digita ":" Categoria "," Id ": 1198," CategoryType ": {" id ": 1197," nome ":" funzione "}," nome ":" pharmd "}, {" type ":" categoria " , "Id": 1199, "CategoryType": {"id": 1197, "nome": "funzione"}, "nome": "im - cv/gi"}, {"type": "categoria", " ID ": 1200," CategoryType ": {" Id ": 1180," Nome ":" Technology "}," Nome ":" Mobile Apps "}, {" Type ":" Categoria "," Id ": 1201, "CategoryType": {"id": 1197, "nome": "funzione"}, "nome": "rapide"}, {"type": "categoria", "id": 1202, "categorytype": {" ID ": 1197," nome ":" funzione "}," nome ":" im - oncologia "}, {" type ":" categoria "," id ": 1203," categorytype ": {" id ": 1186 , "nome": "capacità"}, "nome": "clin"}

Ma poiché un amministratore può aggiungere categorie e categorie a qualsiasi tipo, i discese devono essere creati dinamicamente in quanto sono stati codificati. Deve esserci un nuovo discesa per ogni tipo di categoria.

Quindi quello che sono stato in grado di fare è stato avere tutte le categorie mostrate in un discesa raggruppato per tipo di categoria con questo;

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

Ho creato la fabbrica per ottenere le categorie;

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

Il controller sembra così;

$scope.myCategories = [];

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

Quindi, ad esempio, prendi la prima riga del JSON.

La categoria di "spotfire" è nella "tecnologia" di categoria.

Quindi, per quella categoria, avrei bisogno del discesa della tecnologia che mostra almeno Spotfire + qualsiasi altra cosa venga analizzata nel file JSON in quella categoria.

Quindi un altro discesa per la categoria successiva e così via.

Answer 1

Ecco una versione alternativa che rende ogni selezione singolarmente. Sta usando un'usanza groupBy filtro (usando sottolineare):

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

insieme a:

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

Sfortunatamente il filtro deve essere applicato quando i dati cambiano,

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

perché se usato con ng-repeat Direttamente angolare si lamenterà di un Infinite $ digest loop.

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

D'altra parte, date le tue esigenze, sarebbe molto più semplice se il tuo JSON sarebbe già strutturato nel modo in cui ne hai bisogno (tipi di categoria con un elenco di categorie infantili, non viceversa).

---

Risposta originale:

Non riesco davvero a immaginare il tuo layout finale, ma un semplice punto di partenza potrebbe essere il group by caratteristica di ng-options.

Per esempio:

<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