재귀 옵션을 사용하여 md- 선택

Question

하위 범주가있는 범주 배열을 반복하려고합니다.

문제가 있습니다. 나는 종류의 배열을 가지고 : 당신이 볼 수 있듯이

$scope.categories = [{ 
    "_id": 1, 
    "name": "Cat 1", 
    "categories": { 
    "_id": 11, 
    "name": "Cat 11", 
    "categories": { 
     "_id": 111, 
     "name": "Cat 111", 
     "categories": null 
    } 
    } 
}, { 
    "_id": 2, 
    "name": "Cat 2", 
    "categories": null 
}, { 
    "_id": 3, 
    "name": "Cat 3", 
    "categories": null 
}]; 

은, 하위 범주와 객체의 배열입니다, 그래서 내가 재귀 솔루션이 필요하다는 것을 알고있다.

나는 MD-선택하십시오으로 모든 범주 표시해야합니다 (그렇지 않은 모든 necesary 그룹을이다, 그러나 큰 것)과 나는이 노력하고 있어요 :

<md-input-container class="md-block"> 
    <label>Categories</label> 
    <md-select ng-model="selectedCategory"> 
    <md-option ng-value="category._id" ng-repeat-start="category in categories">{{category.name}}</md-option> 
    <span ng-repeat-end ng-include="'subcategories'" ng-if="category.categories"></span> 
    </md-select> 
</md-input-container> 
<script type="text/ng-template" id="subcategories"> 
{{category.name}} 
<md-option ng-value="category._id" ng-repeat-start="category in category.categories">{{category.name}}</md-option> 
<span ng-repeat-end ng-include="'subcategories'" ng-if="category.categories"></span> 

그것은 부분적으로 작동 , 그러나 예상 한 결과가 아닙니다.

내가 원하는 것은 무엇입니까? 내가 무엇을 가지고이

같은 뭔가? This code

자세한 내용이 필요한 경우 알려주십시오.

감사

Answer 1

당신은 단순히 중첩 수준에 따라 목록과 스타일 요소를 평평하게 할 수 있습니다.

angular 
 
    .module('app', ['ngMaterial']) 
 
    .controller('AppController', function($scope) { 
 

 
    $scope.categories = [{ 
 
     "_id": 1, 
 
     "name": "Cat 1", 
 
     "categories": [{ 
 
     "_id": 11, 
 
     "name": "Cat 11", 
 
     "categories": [{ 
 
      "_id": 111, 
 
      "name": "Cat 111", 
 
      "categories": null 
 
     }] 
 
     }] 
 
    }, { 
 
     "_id": 2, 
 
     "name": "Cat 2", 
 
     "categories": null 
 
    }, { 
 
     "_id": 3, 
 
     "name": "Cat 3", 
 
     "categories": null 
 
    }]; 
 

 
    $scope.flattenCategories = flatten($scope.categories, 0); 
 

 
    function flatten(categories, level) { 
 
     var flat = []; 
 
     for (var i = 0, n = categories.length, category; category = categories[i]; i++) { 
 
     flat.push({ 
 
      _id: category._id, 
 
      name: category.name, 
 
      level: level 
 
     }); 
 
     if (category.categories) { 
 
      flat = flat.concat(flatten(category.categories, level + 1)); 
 
     } 
 
     } 
 

 
     return flat; 
 
    } 
 

 
    });

.subcategory-0 .md-text { 
 
    margin-left: 0; 
 
} 
 

 
.subcategory-1 .md-text { 
 
    margin-left: 8px; 
 
} 
 

 
.subcategory-2 .md-text { 
 
    margin-left: 16px; 
 
} 
 

 
.subcategory-3 .md-text { 
 
    margin-left: 24px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-animate.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-aria.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-messages.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> 
 

 
<div ng-app="app" ng-controller="AppController"> 
 
    <form name="myForm"> 
 
    <md-input-container class="md-block"> 
 
     <label>Categories</label> 
 
     <md-select ng-model="selectedCategory" name="myCategory"> 
 
     <md-option ng-class="'subcategory-' + category.level" ng-value="category._id" ng-repeat="category in flattenCategories track by category._id">{{ category.name }}</md-option> 
 
     </md-select> 
 
     <!-- <pre ng-bind="flattenCategories | json"></pre> --> 
 
    </md-input-container> 
 
    </form> 
 
</div>