Créez dynamiquement plusieurs listes déroulantes Angularjs à partir d'un seul fichier JSON

Question

J'ai une liste de catégories Types et chaque catégorie Type a une liste de catégories en eux et je les affiche dans une liste déroulante à laquelle l'utilisateur peut sélectionner plusieurs éléments et les choix faits filtreront les applications affichées dans la vue (il s'agit d'un inhouse magasin d'applications)

Il s'agit du fichier JSON avec lequel je travaille.

{"type": "catégorie", "id": 1181, "categoryType": {"id": 1180, "name": "Technology"}, "name": "spotfire"}, {"type": "Catégorie", "ID": 1182, "catégorieType": {"id": 1180, "nom": "Technology"}, "name": "pipeLinp"}, {"type": "catégorie", "id ": 1184" ": {" id ": 1183," name ":" catégorie "}," nom ":" clin "}, {" type ":" catégorie "," id ": 1187," catégorieType ": {" id " : 1186, "Name": "Capability"}, "Name": "Chemistry"}, {"Type": "Catégorie", "ID": 1188, "catégorieType": {"id": 1183, "name" : "Catégorie"}, "nom": "Key Opinion Leaders"}, {"Type": "Catégorie", "ID": 1189, "CatégoryType": {"ID": 1183, "Name": "Catégorie" }, "name": "pnts"}, {"type": "catégorie", "id": 1190, "categoryType": {"id": 1183, "name": "catégorie"}, "name": "CI"}, {"type": "catégorie", "id": 1191, "catégorietype": {"id": 1180, "name": "Technology"}, "name": "VantageP"}, { "type": "catégorie", "id": 1192, "catégorietype": {"id": 1183, "name": "catégorie"}, "name": "cibles"}, {"type": "catégorie "," id ": 1193," categoryType ": {" id ": 1186," nom ":" capab itilité "}," nom ":" Science de l'information "}, {" type ":" catégorie "," id ": 1194," catégorietype ": {" id ": 1186," name ":" capabilité "}," Nom ":" dmp "}, {" type ":" catégorie "," id ": 1195," catégorietype ": {" id ": 1180," name ":" Technology "}," name ":" web spotfire Lecteur "}, {" type ":" catégorie "," id ": 1196," catégorietype ": {" id ": 1186," name ":" capabilité "}," name ":" prédictifs "}, {" Type ":" Catégorie "," ID ": 1198," CatégoryType ": {" ID ": 1197," Name ":" Function "}," Name ":" PharmD "}, {" Type ":" Catégorie " , "id": 1199, "catégorietype": {"id": 1197, "name": "function"}, "name": "im - cv / gi"}, {"type": "catégorie", " id ": 1200," categoryType ": {" id ": 1180," name ":" Technology "}," name ":" mobile apps "}, {" type ":" catégorie "," id ": 1201, "CatégoryType": {"id": 1197, "name": "function"}, "name": "rapide"}, {"type": "catégorie", "id": 1202, "catégorieType": {" id ": 1197," name ":" function "}," name ":" im - oncology "}, {" type ":" catégorie "," id ": 1203," categoryType ": {" id ": 1186 , "nom": "capacité"}, "nom": "clin"}

Mais parce qu'un administrateur peut ajouter des types de catégories et des catégories à tout type, les listes déroulantes doivent être créées dynamiquement car elles ont été codées en dur. Il doit y avoir une nouvelle liste déroulante pour chaque type de catégorie.

Donc, ce que j'ai pu faire, c'est avoir toutes les catégories affichées dans une liste déroulante groupée par type de catégorie avec cela;

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

J'ai créé l'usine pour obtenir les catégories;

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

Le contrôleur ressemble à ceci;

$scope.myCategories = [];

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

Ainsi, par exemple, prenez la première ligne du JSON.

La catégorie de «SpotFire» est dans la «technologie» de catégories.

Donc, pour cette catégorie Type, j'aurais besoin de la liste déroulante de la technologie qui montre au moins SpotFire + tout ce qui est analysé dans le fichier JSON étant dans cette catégorie Type.

Ensuite, une autre liste déroulante pour la prochaine catégorie Type et ainsi de suite.

Answer 1

Voici une version alternative rendant chaque sélection individuellement. Il utilise une coutume groupBy filtre (en utilisant souligner):

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

avec:

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

Malheureusement, le filtre doit être appliqué lorsque les données changent,

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

Parce que s'il est utilisé avec ng-repeat directement angulaire se plaindra d'un Boucle de digest infinie.

Démo: http://plnkr.co/edit/ipfvfh3pbloyk1u4n3la?p=preview

D'un autre côté, compte tenu de vos exigences, ce serait beaucoup plus simple si votre JSON serait déjà structuré comme vous en avez besoin (types de catégorie avec une liste de catégories d'enfants, et non l'inverse).

---

réponse originale:

Je ne peux pas vraiment imaginer votre disposition finale, mais un simple point de départ pourrait être le group by caractéristique de ng-options.

Par exemple:

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

Démo: http://plnkr.co/edit/ja8dspuvqmrhmkk9yn6r?p=preview