단일 JSON 파일에서 여러 드롭 다운 AngularJS 동적으로 생성

Question

카테고리 타입 목록이 있으며 각 범주 유형은 그 안에 카테고리 목록이 있으며 사용자가 여러 항목을 선택할 수있는 드롭 다운에 표시하고 있으며 선택한 내용은보기에 표시되는 앱을 필터링합니다 (이것은 내역입니다. 앱 스토어)

이것은 JSON 파일입니다.

{ "type": "category", "id": 1181, "categoryType": { "id": 1180, "name": "technology"}, "name": "spotfire"}, { "type": "범주", "ID": 1182, "CategoryType": { "id": 1180, "name": "technology"}, "name": "pipelinp"}, { "type": "category", "id" ": 1184,"categoryType ": {"id ": 1183,"name ":"category "},"name ":"ibsi "}, {"type ":"category ","id ": 1185,"categoryType " ": {"id ": 1183,"name ":"category "},"name ":"clin "}, {"type ":"category ","id ": 1187,"categoryType ": {"id " : 1186, "name": "capability"}, "name": "Chemistry"}, { "type": "category", "id": 1188, "categoryType": { "id": 1183, "name" : "범주"}, "이름": "키 의견 리더"}, { "type": "category", "id": 1189, "categoryType": { "id": 1183, "name": "category" }, "name": "pnts"}, { "type": "category", "id": 1190, "categoryType": { "id": 1183, "name": "category"}, "name": "ci"}, { "type": "category", "id": 1191, "categoryType": { "id": 1180, "name": "technology"}, "name": "volantep"}, { "type": "category", "id": 1192, "categoryType": { "id": 1183, "name": "category"}, "name": "targets"}, { "type": "범주" ","id ": 1193,"CategoryType ": {"id ": 1186,"name ":"capab Imity "},"name ":"Information Science "}, {"type ":"category ","id ": 1194,"categoryType ": {"id ": 1186,"name ":"capability "}," 이름 ":"dmp "}, {"type ":"category ","id ": 1195,"categoryType ": {"id ": 1180,"name ":"technology "},"name ":"Spotfire Web Player "}, {"type ":"category ","id ": 1196,"categoryType ": {"id ": 1186,"name ":"capability "},"name ":"predictives "}, {" 유형 ":"범주 ","ID ": 1198,"CategoryType ": {"id ": 1197,"name ":"function "},"name ":"pharmd "}, {"type ":"category " , "id": 1199, "categoryType": { "id": 1197, "name": "function"}, "name": "im -cv/gi"}, { "type": "category", " id ": 1200,"CategoryType ": {"id ": 1180,"name ":"technology "},"name ":"mobile apps "}, {"type ":"category ","id ": 1201, "categoryType": { "id": 1197, "name": "function"}, "name": "rapide"}, { "type": "category", "id": 1202, "categoryType": { " id ":"1197, "name": "function"}, "name": "im -toncology"}, { "type": "category", "id": 1203, "categoryType": { "id": 1186 , "name": "capability"}, "name": "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'의 범주는 CategoryType 'Technology'에 있습니다.

따라서 해당 카테고리 유형의 경우 적어도 Spotfire +를 보여주는 기술의 드롭 다운이 필요합니다.

그런 다음 다음 카테고리 유형 등에 대한 또 다른 드롭 다운.

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 직접 Angular는에 대해 불평합니다 무한 $ 다이제스트 루프.

데모: http://plnkr.co/edit/ipfvfh3pbloyk1u4n3la?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/ja8dspuvqmrhmkkk9yn6r?p=preview