إليك نسخة بديلة تقدم كل تحديد بشكل فردي. إنه يستخدم العرف 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