قم بإنشاء AngularJs متعددة من المنسدلة ديناميكيًا من ملف JSON واحد

Question

لديّ قائمة من فئات الفئات ويحتوي كل فئة على قائمة من الفئات داخلها ، وأعرضها في منسدلة يمكن للمستخدم تحديد عناصر متعددة من الخيارات التي تم إجراؤها على تصفية التطبيقات التي تظهر في العرض (هذا هو Inhouse متجر التطبيقات)

هذا هو ملف JSON IM أعمل معه.

" "الفئة" ، "المعرف": 1182 ، "الفئة": {"id": 1180 ، "name": "Technology} ،" name ":" pipelinp "} ، {" type ": ": 1184 ،" categoryype ": {" id ": 1183 ،" name ":" category "} ،" name ":" ibsi "} ، {" type ": ": {" id ": 1183 ،" name ":" الفئة "} ،" الاسم ":" Clin "} ، {" type ":" category "،" id ": 1187 ، : 1186 ، "name": "capability"} ، "name": "Chemistry"} ، {"type": "category" ، "id": : "الفئة"} ، "الاسم": "قادة الرأي الرئيسيين"} ، {"type": "category" ، "id": 1189 ، } ، "name": "pnts"} ، {"type": "category" ، "id": 1190 ، "CI"} ، {"type": "category" ، "id": 1191 ، "categoryype": {"id": 1180 ، "name": "Technology} ،" name ": "النوع": "الفئة" ، "المعرف": 1192 ، "الفئة": {"id": 1183 ، "name": "الفئة"} ، "الاسم": "الأهداف"} ، {"النوع": "الفئة" "،" id ": 1193 ،" categoryype ": {" id ": 1186 ،" name ":" Capab ility "} ،" name ":" Information Science "} ، {" type ":" category "،" id ": 1194 ، الاسم ":" dmp "} ، {" type ":" category "،" id ": 1195 ، Player "} ، {" type ":" category "،" id ": 1196 ، اكتب ":" الفئة "،" المعرف ": 1198 ،" الفئة ": {" id ": 1197 ،" name ":" function "،" name ":" pharmd "} ، {" type ": ، "ID": 1199 ، "CategoryType": {"id": 1197 ، "name": "function"} ، "name": "im - cv/gi"} ، {"type": ID ": 1200 ،" CategoryType ": {" id ": 1180 ،" name ":" Technology "،" Name ":" Mobile Apps "، {" type ": "categorytype": {"id": 1197 ، "name": "function"} ، "name": "rapide"} ، {"type": "category" ، "id": 1202 ، ID ": 1197 ،" name ":" function "} ،" name ":" im - oncology "} ، {" type ":" category "،" id ": 1203 ، ، "الاسم": "القدرة"} ، "الاسم": "Clin"}

ولكن نظرًا لأن المسؤول يمكن أن يضيف فئات الفئات والفئات إلى أي نوع ، يجب إنشاء المنسدلة بشكل ديناميكي حيث تم ترميزها بشدة. يجب أن يكون هناك منسدلة جديدة لكل نوع فئة.

لذا فإن ما تمكنت من فعله هو أن جميع الفئات الموضحة في أحد المنسدلين تم تجميعها حسب نوع الفئة مع هذا ؛

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

لقد قمت بإنشاء المصنع للحصول على الفئات ؛

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

وحدة التحكم تبدو هكذا ؛

$scope.myCategories = [];

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

لذلك على سبيل المثال ، خذ السطر الأول من JSON.

فئة "spotfire" موجودة في فئة "التكنولوجيا".

لذلك بالنسبة إلى هذه الفئة ، سأحتاج إلى القائمة المنسدلة للتكنولوجيا التي تعرض على الأقل Spotfire + أي شيء آخر يتم تحليله في ملف JSON في تلك الفئة.

ثم منسدلة أخرى للفئة التالية وما إلى ذلك.

Answer 1

إليك نسخة بديلة تقدم كل تحديد بشكل فردي. إنه يستخدم العرف groupBy تصفية (باستخدام دون النطاق):

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

مع:

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

لسوء الحظ ، يجب تطبيق المرشح عندما تتغير البيانات ،

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

لأنه إذا تم استخدامه مع ng-repeat سوف يشكو الزاوي مباشرة من حلقة Infinite $ Digest.

العرض التوضيحي: http://plnkr.co/edit/ipfffh3pbloyk1u4n3la؟p=preview

من ناحية أخرى ، بالنظر إلى متطلباتك ، سيكون الأمر أكثر بساطة إذا تم تنظيم JSON الخاص بك بالفعل بالطريقة التي تحتاجها (أنواع الفئات مع قائمة فئات الطفل ، وليس العكس).

---

الإجابة الأصلية:

لا يمكنني حقًا تصوير التصميم النهائي الخاص بك ، ولكن يمكن أن تكون نقطة انطلاق بسيطة هي group by ميزة ng-options.

على سبيل المثال:

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

العرض التوضيحي: http://plnkr.co/edit/ja8dspuvqmrhmk9yn6r؟p=preview