Javascript 是否可以使用角度选择设计多层多选菜单
在json数据中，ClassifiedSubCategory具有子类别列表。我想显示带有MultiHelp选项的多级下拉列表。可以使用angular select，也可以使用ul li。建议任何可以容忍的行为。可以使用ng重复启动。 它有树状结构 类别Javascript 是否可以使用角度选择设计多层多选菜单,javascript,angularjs,json,Javascript,Angularjs,Json,在json数据中，ClassifiedSubCategory具有子类别列表。我想显示带有MultiHelp选项的多级下拉列表。可以使用angular select，也可以使用ul li。建议任何可以容忍的行为。可以使用ng重复启动。 它有树状结构 类别 子类别 子类别 您可以有两个选择框来选择类别和子类别。我使用了一个更简单的json来解释这个概念 "GetadminClassifiedCategoryListResult": [ { "AddedBy": 0,
- 子类别
- 子类别
"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
},
类别：
子类别：
所选类别：{Category.CategoryId}
所选子类别：{{SubCategory.CategoryId}
谢谢你们的帮助。我已经尝试了一些东西，可以给我所有的类别和子类别。我想我可以应用css使其看起来像多级菜单
<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>
选择一个类别
{{m.CategoryName}
{{j.CategoryName}
@* *@
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"
}
]
}]
});
<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>
<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>