javascript - 使用angular js将json结构转换为下拉列表

Question

我有一个具有属性 categories[] 的 json，在每个 categories 中都有一个 subCategories[]；对于每个subCategories，都有一个subSubCategories。我想根据给定的 json 结构生成下拉菜单。

{
  "categories": [
    {
      "men": "Mens",
      "subCat": [
        {
          "topWear": "Top Wear",
          "subSubCat": [
            {
              "tshirts": "T-shirts",
              "otherAttributes": [
                {
                  "fitting": [
                    "type 1",
                    "type 2",
                    "type 3"
                  ]
                },
                {
                  "washCare": [
                    "wash Care 1",
                    "wash care 2"
                  ]
                }
              ]
            },
            {
              "shirt": "Shirt",
              "otherAttributes": [
                {
                  "fitting": [
                    "type 4",
                    "type 5",
                    "type 6"
                  ]
                },
                {
                  "washCare": [
                    "wash Care 4",
                    "wash care 5"
                  ]
                }
              ]
            }
          ]
        },
        {
          "bottomWear": "Bottom Wear"
        }
      ]
    },
    {
      "women": "Women",
      "subCat": [
        {
          "topWear": "Top Wear",
          "subSubCat": [
            {
              "tshirts": "T-shirts",
              "otherAttributes": [
                {
                  "fitting": [
                    "w-type 1",
                    "type 2",
                    "type 3"
                  ]
                },
                {
                  "washCare": [
                    "w-wash Care 1",
                    "wash care 2"
                  ]
                }
              ]
            },
            {
              "shirt": "Shirt",
              "otherAttributes": [
                {
                  "fitting": [
                    "w-type 4",
                    "type 5",
                    "type 6"
                  ]
                },
                {
                  "washCare": [
                    "w-wash Care 4",
                    "wash care 5"
                  ]
                }
              ]
            }
          ]
        },
        {
          "bottomWear": "Bottom Wear"
        }
      ]
    },
    {
      "kids": "Kids"
    }
  ]
}

例如:

• 最初，第一个下拉菜单应填充mens、women、kids 选项。
• 接下来在主要类别选择中，第二个下拉菜单应填充 subCat 选项。
• 接下来，在选择 subCat 时，第三个下拉菜单应填充 subSubCat 选项。

如何使用 angular 实现此目的？

Answer 1

首先，您的示例不起作用。而且您的结构不适合这种情况。我为您创建了一个示例:FIDDLE

你可以像这样使用它:

html

<div ng-controller="DemoCtrl" ng-app="main">
    <hr>
    <select ng-model="selectedFirst" ng-options="first.name for first in categories track by first">
    <option value="">Select Account</option>
  </select>
  <select ng-model="selectedSecond"  ng-options="second.name for second in selectedFirst.categories track by second">
    <option value="">Select Account</option>
  </select>
</div>

js

(function () {
  'use strict';

  /**
   * Main module of the main
   */
  angular
    .module('main', []);
})();


(function(){
    'use strict'

  angular
    .module('main')
    .controller('DemoCtrl', DemoCtrl);

  /** @ngInject */
  function DemoCtrl($scope) {
    $scope.categories = [
        {
        "name" : "Mens",
        "categories" : [
            {
                "name" : "Top Wear",
                "categories" : [
                    {

                    }
                ]
            }
        ]
      }
    ];
  }
})();