Question

<select ng-model="Category.CategoryId" ng-options="template.CategoryId as template.CategoryName for template in Adminsubcat">
                <option value="" selected="selected">Select a Category</option>
                <option ng-repeat="j in template.Adminsubcat">{{j.CategoryName}}</option>
            </select>

我在json中的数据

 "GetadminClassifiedCategoryListResult":
[
    {
        "AddedBy": 0,
        "AddedOn": null,
        "CategoryIcon": "icon-library_books",
        "CategoryId": 221,
        "CategoryName": "FBVGSDFBDFBDF",
        "ClassifiedSubCategory":
        [
            {
                "AddedBy": 0,
                "AddedOn": null,
                "CategoryIcon": "",
                "CategoryId": 238,
                "CategoryName": "zcvb",
                "DeletedBy": 0,
                "DeletedOn": null,
                "IsActive": false,
                "ModifiedBy": 0,
                "ModifiedOn": null,
                "ParentCategoryId": 221
            },
            {
                "AddedBy": 0,
                "AddedOn": null,
                "CategoryIcon": "",
                "CategoryId": 237,
                "CategoryName": "poiyu",
                "DeletedBy": 0,
                "DeletedOn": null,
                "IsActive": false,
                "ModifiedBy": 0,
                "ModifiedOn": null,
                "ParentCategoryId": 221
            },
            {
                "AddedBy": 0,
                "AddedOn": null,
                "CategoryIcon": "",
                "CategoryId": 236,
                "CategoryName": "oi",
                "DeletedBy": 0,
                "DeletedOn": null,
                "IsActive": false,
                "ModifiedBy": 0,
                "ModifiedOn": null,
                "ParentCategoryId": 221
            },
            {
                "AddedBy": 0,
                "AddedOn": null,
                "CategoryIcon": "",
                "CategoryId": 235,
                "CategoryName": "uy",
                "DeletedBy": 0,
                "DeletedOn": null,
                "IsActive": false,
                "ModifiedBy": 0,
                "ModifiedOn": null,
                "ParentCategoryId": 221
            },
            {
                "AddedBy": 0,
                "AddedOn": null,
                "CategoryIcon": "",
                "CategoryId": 234,
                "CategoryName": "tr",
                "DeletedBy": 0,
                "DeletedOn": null,
                "IsActive": false,
                "ModifiedBy": 0,
                "ModifiedOn": null,
                "ParentCategoryId": 221
            },
            {
                "AddedBy": 0,
                "AddedOn": null,
                "CategoryIcon": "",
                "CategoryId": 233,
                "CategoryName": "hjjjhjghjhgjghjhgjgjghhgjghj",
                "DeletedBy": 0,
                "DeletedOn": null,
                "IsActive": false,
                "ModifiedBy": 0,
                "ModifiedOn": null,
                "ParentCategoryId": 221
            },
            {
                "AddedBy": 0,
                "AddedOn": null,
                "CategoryIcon": "",
                "CategoryId": 232,
                "CategoryName": "fghgfhgfhgfhgfhgfhgf",
                "DeletedBy": 0,
                "DeletedOn": null,
                "IsActive": false,
                "ModifiedBy": 0,
                "ModifiedOn": null,
                "ParentCategoryId": 221
            },
            {
                "AddedBy": 0,
                "AddedOn": null,
                "CategoryIcon": "",
                "CategoryId": 231,
                "CategoryName": "trfhgfhgfhgfhgfhgfhgf",
                "DeletedBy": 0,
                "DeletedOn": null,
                "IsActive": false,
                "ModifiedBy": 0,
                "ModifiedOn": null,
                "ParentCategoryId": 221
            },
            {
                "AddedBy": 0,
                "AddedOn": null,
                "CategoryIcon": "",
                "CategoryId": 230,
                "CategoryName": "gfhfhgfhgfhgfh",
                "DeletedBy": 0,
                "DeletedOn": null,
                "IsActive": false,
                "ModifiedBy": 0,
                "ModifiedOn": null,
                "ParentCategoryId": 221
            },
            {
                "AddedBy": 0,
                "AddedOn": null,
                "CategoryIcon": "",
                "CategoryId": 229,
                "CategoryName": "fdgdfgdgdfgdfgdfgdf",
                "DeletedBy": 0,
                "DeletedOn": null,
                "IsActive": false,
                "ModifiedBy": 0,
                "ModifiedOn": null,
                "ParentCategoryId": 221
            },
            {
                "AddedBy": 0,
                "AddedOn": null,
                "CategoryIcon": "",
                "CategoryId": 228,
                "CategoryName": "sdfgsdgdf",
                "DeletedBy": 0,
                "DeletedOn": null,
                "IsActive": false,
                "ModifiedBy": 0,
                "ModifiedOn": null,
                "ParentCategoryId": 221
            },
            {
                "AddedBy": 0,
                "AddedOn": null,
                "CategoryIcon": "",
                "CategoryId": 227,
                "CategoryName": "dsgsdfgsdgsdg",
                "DeletedBy": 0,
                "DeletedOn": null,
                "IsActive": false,
                "ModifiedBy": 0,
                "ModifiedOn": null,
                "ParentCategoryId": 221
            },
            {
                "AddedBy": 0,
                "AddedOn": null,
                "CategoryIcon": "",
                "CategoryId": 223,
                "CategoryName": "fhhhhhhhhhhgfhgf",
                "DeletedBy": 0,
                "DeletedOn": null,
                "IsActive": false,
                "ModifiedBy": 0,
                "ModifiedOn": null,
                "ParentCategoryId": 221
            },
            {
                "AddedBy": 0,
                "AddedOn": null,
                "CategoryIcon": "",
                "CategoryId": 222,
                "CategoryName": "dfhfdhdfhdfhdf",
                "DeletedBy": 0,
                "DeletedOn": null,
                "IsActive": false,
                "ModifiedBy": 0,
                "ModifiedOn": null,
                "ParentCategoryId": 221
            }
        ],
        "DeletedBy": 0,
        "DeletedOn": null,
        "IsActive": false,
        "ModifiedBy": 0,
        "ModifiedOn": null,
        "ParentCategoryId": 0
    },

在json数据中，ClassifiedSubCategory有子类别列表。我希望显示多级下拉列表，使用多角度选项。可能使用角度选择或我必须使用ul li。建议任何js avavilable。可以使用ng-repeat start。它有树木结构

类别

子类
子类

Answer 1

您可以使用两个选择框来选择类别和子类别。我用一个简单的json来解释这个概念。

angular.module('my-app', [])
  .controller('testCtrl', function($scope) {

    $scope.categories = [{
      "CategoryId": 1,
      "CategoryName": "Category A",
      "subCategories": [{
          "CategoryId": 101,
          "CategoryName": "Sub-Category A1"
        }, {
          "CategoryId": 102,
          "CategoryName": "Sub-Category A2"
        }

      ]
    }, {
      "CategoryId": 2,
      "CategoryName": "Category B",
      "subCategories": [{
          "CategoryId": 201,
          "CategoryName": "Sub-Category B1"
        }, {
          "CategoryId": 202,
          "CategoryName": "Sub-Category B2"
        }

      ]
    }]

  });

HTML：

<div ng-app="my-app">
<div ng-controller="testCtrl">
  Category:
  <select ng-model="Category" ng-options="template as template.CategoryName for template in categories">
  </select>
  Sub Category:
  <select ng-model="SubCategory" ng-options="template as template.CategoryName for template in Category.subCategories">
  </select>
  <p>
    Selected Category: {{Category.CategoryId}}
    <br /> Selected Sub Category: {{SubCategory.CategoryId}}
    <br />
  </p>
</div>

Answer 2

请大家帮忙。我尝试了一些东西给我所有类别和子类别。我想我可以将css应用到多级菜单中。

<select ng-model="Category.CategoryId">
                <option value="" selected="selected">Select a Category</option>
                <option ng-repeat-start="m in Adminsubcat" >{{m.CategoryName}}</option>
                <option ng-repeat="j in m.ClassifiedSubCategory" ng-repeat-end>{{j.CategoryName}}</option>
               @* <option ng-repeat-end></option>*@
            </select>

是否可以使用角度选择设计多重多选菜单

2 个答案: