使用角度js将json结构转换为下拉列表

时间:2018-01-02 07:21:23

标签: javascript angularjs json

我有一个具有属性incompatible type, int cannot be converted to c2 的json,并且在每个categories[]内有一个categories;每个subCategories[]都有一个subCategories。我想根据给定的json结构生成下拉列表。

subSubCategories

例如:

  • 最初应首先使用{ "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" } ] } menswomen选项填充第一个下拉列表。
  • 接下来在主要类别选择中,第二个下拉列表应填充kids个选项。
  • 接下来,在subCat选择中,第三个下拉列表应填充subCat个选项。

如何使用angular实现此目的?

1 个答案:

答案 0 :(得分: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" : [
                    {

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