Vaibhav Save Vaibhav Save - 4 months ago 17
AngularJS Question

is it possible to design multileval multiselect menu using angular select

<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>


my data in 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
},


in json data ClassifiedSubCategory has list of sub category.i want to display multilevel dropdown with multiselct options.is possible using angular select or I have to use ul li. suggest any js avavilable. it is possible using ng-repeat start.
it has treestructure

category


  • subcategory

  • subcategory


Answer

You can have two select boxes for selecting category and sub-category. I have used a simpler json to explain the concept.

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>