再帰オプションを使用して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>