无法使用角度js将嵌套数组填充到下拉列表中

Question

• 我正在尝试将json填充到下拉列表中，主要是主要类别，子类别和子子类别。
• 我可以填充主要类别和子类别，但我无法填充subsubcategory。
• 同样仅基于主要类别，应填充子类别，同样基于子类别，sun子类别下拉列表应填充选项。

请帮忙。

的代码

＆＃13;

＆＃13;

var app = angular.module('main', []);
app.controller('DemoCtrl', function($scope) {
  $scope.chooseCategories = [{
    categoryId: 1,
    catName: "men",
    desc: "some description",
    subcat: [{
      key: "topWear",
      value: "m-top-wear",
      subSubCat: [{
        key: "Ma",
        value: "M-A"
      }, {
        key: "Mb",
        value: "M-B"
      }]
    }, {
      key: "bottomwear",
      value: "m-bottom-wear",
      subSubCat: [{
        key: "Ma",
        value: "M-A"
      }, {
        key: "Mb",
        value: "M-B"
      }]
    }]
  }, {
    categoryId: 2,
    catName: "women",
    desc: "some description",
    subcat: [{
      key: "topWear",
      value: "w-top-wear",
			subSubCat: [{
        key: "Wa",
        value: "W-A"
      }, {
        key: "Wb",
        value: "w-B"
      }]
    }, {
      key: "bottomwear",
      value: "w-bottom-wear",
			subSubCat: [{
        key: "Ma",
        value: "M-A"
      }, {
        key: "Mb",
        value: "M-B"
      }]
    }]
  }, {
    categoryId: 3,
    catName: "kids",
    desc: "some description",
    subcat: [{
      key: "topWear",
      value: "k-top-wear"
    }, {
      key: "bottomwear",
      value: "k-bottom-wear"
    }]
  }];
  var locationsArr = $scope.chooseCategories.map(function(item) {
    return item.subcat;
  });

  var temp = $scope.chooseCategories.map(function(item) {
    return item.subcat;
  });

  $scope.finalArr = locationsArr[0].concat(locationsArr[1]).concat(locationsArr[2]);

  $scope.selectedCountry = $scope.chooseCategories[0].categoryId.toString();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<div ng-controller="DemoCtrl" ng-app="main">
  Main category::<select ng-model="selectedCountry">
    <option ng-repeat="x in chooseCategories" value="{{x.categoryId}}"> {{x.catName}}</option>
  </select>
  <hr>
 Sub category:: <select ng-model="selectedsubcategory">
    <option ng-repeat="locations  in finalArr" value="{{locations.key}}"> {{locations.value}}</option>
  </select>
  <hr>
  Sub sub category::<select ng-model="selectedsubSubcategory">
    <option ng-repeat="locations  in finalArr2" value="{{locations.key}}"> {{locations.value}}</option>
  </select>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

怎么样？

＆＃13;

＆＃13;

var app = angular.module('main', []);
app.controller('DemoCtrl', function($scope) {
  $scope.chooseCategories = [{
    categoryId: 1,
    catName: "men",
    desc: "some description",
    subcat: [{
      key: "topWear",
      value: "m-top-wear",
      subSubCat: [{
        key: "Ma",
        value: "M-A"
      }, {
        key: "Mb",
        value: "M-B"
      }]
    }, {
      key: "bottomwear",
      value: "m-bottom-wear",
      subSubCat: [{
        key: "Ma",
        value: "M-A"
      }, {
        key: "Mb",
        value: "M-B"
      }]
    }]
  }, {
    categoryId: 2,
    catName: "women",
    desc: "some description",
    subcat: [{
      key: "topWear",
      value: "w-top-wear",
			subSubCat: [{
        key: "Wa",
        value: "W-A"
      }, {
        key: "Wb",
        value: "w-B"
      }]
    }, {
      key: "bottomwear",
      value: "w-bottom-wear",
			subSubCat: [{
        key: "Ma",
        value: "M-A"
      }, {
        key: "Mb",
        value: "M-B"
      }]
    }]
  }, {
    categoryId: 3,
    catName: "kids",
    desc: "some description",
    subcat: [{
      key: "topWear",
      value: "k-top-wear"
    }, {
      key: "bottomwear",
      value: "k-bottom-wear"
    }]
  }];

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-controller="DemoCtrl" ng-app="main">
  <select ng-model="selectedCategory" ng-options="x.catName for x in chooseCategories" ng-init="selectedCategory = chooseCategories[0]">
  </select>
  <hr>
  <select ng-model="selectedsubcategory" ng-options="x.value for x in selectedCategory.subcat" ng-init="selectedsubcategory = selectedCategory.subcat[0]">
  </select>
  <hr>
    <select ng-model="selectedsubSubcategory" ng-options="x.value for x in selectedsubcategory.subSubCat">
  </select>
</div>

＆＃13;

＆＃13;

＆＃13;