Erstellen Sie dynamisch mehrere Dropdowns AngularJs aus einer einzelnen JSON -Datei

Question

Ich habe eine Liste von KategorieTypen und jeder Kategorie -Typ enthält eine Liste von Kategorien und ich zeige sie in einer Dropdown -Liste an, aus der der Benutzer mehrere Elemente auswählen kann, und die getroffenen Auswahlmöglichkeiten filtern, welche Apps in der Ansicht angezeigt werden (dies ist ein Inhouse (dies ist ein Inhouse Appstore)

Dies ist die JSON -Datei, mit der ich arbeite.

{"Typ": "Kategorie", "ID": 1181, "CategoryType": {"ID": 1180, "Name": "Technologie"}, "Name": "Spotfire"}, {"Typ": "Kategorie", "ID": 1182, "KategorieType": {"ID": 1180, "Name": "Technologie"}, "Name": "Pipelinp"}, {"Typ": "Kategorie", "id", "id", "id", "id" ": 1184," categoryType ": {" id ": 1183," name ":" kategorie "}," name ":" ibsi "}, {" Typ ":" Kategorie "," id ": 1185," categoryType ": {" ID ": 1183," Name ":" Kategorie "}," Name ":" Clin "}, {" Typ ":" Kategorie "," ID ": 1187," categoryType ": {" id " : 1186, "Name": "Fähigkeit"}, "Name": "Chemie"}, {"Typ": "Kategorie", "ID": 1188, "KategorieType": {"ID": 1183, "Name" : "Kategorie"}, "Name": "Key Meinungsführer"}, {"Typ": "Kategorie", "ID": 1189, "KategorieTyp": {"ID": 1183, "Name": "Kategorie" }, "Name": "Pnts"}, {"Typ": "Kategorie", "ID": 1190, "KategorieType": {"ID": 1183, "Name": "Kategorie"}, "Name": "Ci"}, {"Typ": "Kategorie", "ID": 1191, "KategorieType": {"ID": 1180, "Name": "Technologie"}, "Name": "VantageP"}, {{ "Typ": "Kategorie", "ID": 1192, "KategorieType": {"ID": 1183, "Name": "Kategorie"}, "Name": "Ziele"}, {"Typ": "Kategorie "," id ": 1193," categoryType ": {" id ": 1186," name ":" capab Itility "}," Name ":" Information Science "}, {" Typ ":" Kategorie "," ID ": 1194," KategorieTyp ": {" ID ": 1186," Name ":" Fähigkeit "}," Name ":" DMP "}, {" Typ ":" Kategorie "," ID ": 1195," KategorieType ": {" ID ": 1180," Name ":" Technologie "}," Name ":" Spotfire Web Web Spieler "}, {" Typ ":" Kategorie "," ID ": 1196," categoryType ": {" ID ": 1186," Name ":" Fähigkeit "}," Name ":" Predictives "}, {" Geben Sie ":" Kategorie "," ID ": 1198," KategorieTyp ": {" ID ": 1197," Name ":" Funktion "}," Name ":" Pharmad "}, {" Typ ":" Kategorie " , "id": 1199, "categoryType": {"id": 1197, "name": "function"}, "name": "im - cv/gi"}, {"Typ": "Kategorie", " id ": 1200," categoryType ": {" id ": 1180," name ":" Technology "}," Name ":" Mobile Apps "}, {" Typ ":" Kategorie "," ID ": 1201, "categoryType": {"id": 1197, "name": "function"}, "name": "rapide"}, {"Typ": "Kategorie", "ID": 1202, "categoryType": {" ID ": 1197," Name ":" Funktion "}," Name ":" IM - Oncology "}, {" Typ ":" Kategorie "," ID ": 1203," categoryType ": {" ID ": 1186 , "Name": "Fähigkeit"}, "Name": "Clin"}

Aber da ein Administrator Kategorie und Kategorien zu jedem Typ hinzufügen kann, müssen die Dropdowns dynamisch erstellt werden, sobald sie hart codiert wurden. Für jeden Kategoriestyp muss ein neuer Dropdown -Bereich vorhanden sein.

Ich konnte also alle Kategorien in einer Dropdown -Art nach dem Kategorie -Typ gezeigt haben.

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

Ich habe die Fabrik erstellt, um die Kategorien zu erhalten.

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

Der Controller sieht so aus;

$scope.myCategories = [];

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

Nehmen Sie zum Beispiel die erste Zeile des JSON.

Die Kategorie von 'Spotfire' befindet sich in der Kategorie -Technologie.

Für diesen Kategorie -Typ würde ich den Dropdown of Technology benötigen, der zumindest Spotfire + zeigt, was auch immer in der JSON -Datei in dieser Kategorie analysiert wird.

Dann ein weiterer Dropdown für den nächsten Kategorie -Typ und so weiter.

Answer 1

Hier ist eine alternative Version, die jeden ausgewählten ausgewählt hat. Es verwendet einen Brauch groupBy Filter (Verwendung unterstreichen):

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

mit:

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

Leider muss der Filter angewendet werden, wenn sich die Daten ändert,

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

denn wenn mit verwendet werden mit ng-repeat Dirch eckel beschwert sich über eine Unendliche $ Digest -Schleife.

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

Auf der anderen Seite wäre es angesichts Ihrer Anforderungen viel einfacher, wenn Ihr JSON bereits so strukturiert wäre, wie Sie es benötigen (Kategorie-Typen mit einer Liste von Kinderkategorien, nicht umgekehrt).

---

ursprüngliche Antwort:

Ich kann mir Ihr endgültiges Layout nicht wirklich vorstellen, aber ein einfacher Ausgangspunkt könnte der sein group by Merkmal von ng-options.

Z.B:

<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