Can Angular Select be utilized to create a multilevel multiselect menu design?

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

data stored in my JSON file

 "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
            },
            {...}
],
        "DeletedBy": 0,
        "DeletedOn": null,
        "IsActive": false,
        "ModifiedBy": 0,
        "ModifiedOn": null,
        "ParentCategoryId": 0
    },

The JSON data contains a list of subcategories within the ClassifiedSubCategory object. I would like to create a multi-level dropdown with multi-select options. Is this achievable using AngularJS select or should I consider using ul li elements? Please suggest any available JavaScript libraries. Can this be done using ng-repeat to start building the tree structure?

Categories:

  • Subcategory

  • Subcategory

javascriptangularjsjson

Answer №1

To implement a selection process for categories and sub-categories, you can utilize two select boxes. Below is an example using a simplified JSON structure to illustrate 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>

Answer №2

Thank you to everyone for your assistance. I have experimented with a method that displays all categories and subcategories. I believe I can use CSS to create a multilevel menu design.

<select ng-model="Category.CategoryId">
                <option value="" selected="selected">Choose 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stuck with the Same Theme in the AppBar of material-UI?

Currently, I am attempting to modify the theme of a material-UI AppBar by utilizing states. Strangely enough, although the icons are changing, the theme itself is not. If you'd like to take a look at the code, you can find it here: https://codesandbo ...

javascriptcssreactjsmaterial-ui

Transmitting JSON data to PHP for retrieval

( [addF] => stdClass Object ( [0] => stdClass Object ( [productID] => 33 [fQty] => 11 [fPW] => 11 [fP] => [fH] => PVC ...

phpjqueryjson

Combining object properties from a collection of objects based on matching IDs in JavaScript

I have two arrays of objects that I need to merge together based on matching typeId values. The first array contains information about different states, while the second array contains information about state types. The goal is to combine the properties of ...

javascriptarraysobjectmerge

Vue: add a CSS class to products when they are in the shopping cart

As I delve into creating a shopping cart using laravel + vue, I am encountering a major obstacle related to vue's functionality. Within my cart component, the goal is to allow users to effortlessly add or remove products by simply clicking. When a pr ...

javascriptvue.js

Incorporate imagesloaded.js into your PHP script to seamlessly import images from a designated folder

I've implemented the code below into a bootstrap modal to display images from a website folder. These images are loaded using lazyload.js when the modal is opened. Sometimes, there's a delay in displaying images depending on their sizes. I'd ...

javascripthtmlbootstrap-4

Concealing a button in Vue.js and Laravel effortlessly

I am struggling to figure out how to hide the button when there is no data in the table in my Vue.js project. Since I am new to Vue.js, I would really appreciate any help or guidance on how to achieve this. If there is another way to accomplish this, pleas ...

javascriptlaravelvue.js

Tips for parsing json data into a pandas dataframe from a compressed file

My zipped file is quite large, 1.5G in size, with 500 sub folders inside and 5000 json files under each sub folder. I am trying to read the json files into a python dataframe using the code snippet below, but I keep encountering an error. Can you provide ...

pythonjsonpandas

Error encountered while trying to import from './src/components/styles.js': the module '@material-ui/core/styles' does not have a default export and was imported as 'makeStyles'

Every time I attempt to run my React app, an error message pops up: The error reads: './src/components/styles.js Attempted import error: '@material-ui/core/styles' does not contain a default export (imported as 'makeStyles'). I&a ...

javascriptreactjsmaterial-ui

Checking for a certain value in JsonSchema using Python

Hi folks, I have a scenario where I need to validate the "title" field to ensure it contains the value "delectus aut autem". Additionally, I want to check if the "gender" field has either "male" or "female" as its value and validate accordingly. def test ...

pythonjsonapi

How to synchronize dnode and Express authentication?

Currently, I am in the process of developing a web application using Express and dnode. My main focus is on synchronizing authentication between the two platforms. I came across an example that seems relevant to what I'm working on, but for some reas ...

javascriptnode.jsexpressdnode

Utilize sed and regular expressions to extract an array from a JSON file

I'm working on a script to commission embedded devices. These devices fetch a JSON object from an API that includes an array of scripts needed for their commissioning process. { "status":"wait", "settings":{ "serialNo": "123456", "macAddr ...

regexjsonbashsed

What is the best way to postpone the rendering of a table?

My table is bogged down by an excessive number of rows, causing a sluggish rendering process. I'm curious about the best method to address this issue. Are there any existing libraries specifically designed for this purpose? ...

javascripthtmlcssangularjs

Interceptor causing miscommunication with headers transmission

I have encountered a problem with making HTTP requests using Angular 5. I am trying to include a token (jwt) in the header, so I created an interceptor to add the token after the user logs in. However, the header is not being sent correctly as a standalone ...

javascriptangularjsnode.jsexpressinterceptor

Developing a Voting System in CodeIgniter

Currently, I am working on implementing a voting system in my CodeIgniter project called "like". I came across a method on and followed it. After successfully updating the database, I faced an issue where the like count was not displaying on the view. In ...

javascriptphpjquerycodeigniter

Does this Spread Operator Usage Check Out?

Upon reviewing Angular's API documentation, I came across the declaration for the clone() method in HttpRequest as follows: clone(update: { headers?: HttpHeaders; reportProgress?: boolean; params?: HttpParams; responseType?: "arraybuffer" ...

javascriptangulartypescript

Is there a way to modify the material of individual objects in THREE.js without creating separate Meshes?

We have developed a unique PCB Viewer using THREE.js, but now we want to enhance it with selection functionality. While the task itself isn't complex and I have managed to make it work, I am encountering performance challenges. Our goal is to allow us ...

javascriptthree.jsmesh3d-modelling

Decode JSON in Visual Basic using the "Newtonsoft" JSON.net library

Looking for assistance with parsing JSON in VB.NET to create a Bittrex ticker. Here is the request I made using the following code: Dim request As HttpWebRequest Dim response As HttpWebResponse = Nothing Dim reader As StreamReader Try ...

jsonvb.netjson.net

Creating intricate REST API queries with Express.js

I am facing a challenge with my database's structure. I need to create a request that will update a post based on user_id and id. id | title | content | user_id ----+----------------------------+------------- ...

javascriptnode.jsexpressrest

Firefox is encountering issues enumerating the document.styleSheets[].cssRules[] property

Take a look at this code snippet: http://jsfiddle.net/salman/2hyYg/ http://jsfiddle.net/salman/2hyYg/show/ When you try to run the alert(document.styleSheets[x].cssRules.length), it results in a "security exception." Do you know of any workarounds for t ...

javascriptcssfirefoxsecurityexception

I noticed that my regular expression is functioning correctly on regex101, but for some reason, it's

My search works perfectly on regex101 using this link: https://regex101.com/r/z8JCpv/1 However, in my Node script, the third matched group array[2] is returning not only the matching text but also everything following it. An example line from the source ...

javascriptnode.jsregex