Extend the row of the table according to the drop-down menu choice

I am working on a feature where a dropdown menu controls the expansion of rows in a table. Depending on the option selected from the dropdown, different levels of items need to be displayed in the table. For example, selecting level 1 will expand the first row, level 2 will expand up to the second level (dish items), and selecting "All" will expand all rows in the table.

              <select [(ngModel)]="expandModel"
                (ngModelChange)="getoptionedExpansion($event)">
                <option value="lvl1">level 1 </option>
                <option value="lvl2">level 2</option>
                <option value="lvl3"> Level 3 </option>
                <option value="lvl4">level 4 </option>
                <option value="all">All</option>
              </select>

Table :

    <table style="width:100%">
      <thead>
      </thead>
      <tbody>
        <ng-container *ngFor="let data of users">
          <tr (click)="data.hideThis= !data.hideThis" style="border-bottom: 1px solid #DDE3ED;">
            <td class="mainTitleFont cursor-pointer" style="font-size:16px">
              <span *ngIf="data.hideThis">
                -
              </span>
              <span *ngIf="!data.hideThis">
                +
              </span>
              {{data.itemName}}</td>
          </tr>
          <ng-container *ngFor="let item of data.subItemsList">
            <tr (click)="item.hideThis= !item.hideThis" style="font-size:15px; background-color: #edf2ef"
              [hidden]="!data.hideThis">
              <td *ngIf="data.hideThis">
                <span *ngIf="item.hideThis">
                  &nbsp; &nbsp; -
                </span>
                <span *ngIf="!item.hideThis">
                  &nbsp; &nbsp; +
                </span>
                {{item.subitemName}}
              </td>
            </tr>
            <ng-container *ngFor="let prod of item.items">
              <tr (click)="prod.hideThis= !prod.hideThis" style="font-size:14px; background-color: #f2f2f2"
                [hidden]="!data.hideThis || !item.hideThis">
                <td>
                  <span *ngIf="prod.hideThis">
                    &nbsp; &nbsp; &nbsp; &nbsp;-
                  </span>
                  <span *ngIf="!prod.hideThis">
                    &nbsp; &nbsp; &nbsp; &nbsp; +
                  </span>
                  {{prod.itemName}}
                </td>
              </tr>
              <ng-container *ngFor="let stock of prod.stocksList">
                <tr (click)="stock.hideThis= !stock.hideThis" style="font-size:13px; background:#f5f7f6;"
                  [hidden]="!data.hideThis || !item.hideThis || !prod.hideThis">
                  <td>
                    <span *ngIf="stock.hideThis">
                      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-
                    </span>
                    <span *ngIf="!stock.hideThis">
                      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; +
                    </span>
                    {{stock.stockName}}
                  </td>
                </tr>
                <ng-container *ngFor="let prodItem of stock.itemItemsList">
                  <tr (click)="prodItem.hideThis= !prodItem.hideThis" style="font-size:12px"
                    [hidden]="!data.hideThis || !item.hideThis || !stock.hideThis || !prod.hideThis">
                    <td style="width:100%">
                      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{prodItem.itemName}} <br>
                      <div class="list-class">
                        <span>
                          <ul>
                            <li> Portion</li>
                            <li>{{prodItem.date}} </li>
                          </ul>
                        </span>
                      </div>
                    </td>
                  </tr>
                </ng-container>
              </ng-container>
            </ng-container>
          </ng-container>
        </ng-container>
      </tbody>
    </table>

Access the DEMO for more information.

javascriptangulartypescript

Answer №1

To hide each "children", simply use forEach loop and assign a value to hideThis, for example:

expandOptions(event)
{
  if (event=="lvl1")
    this.users.forEach(user=>user.hideThis=true)

  if (event=="lvl2")
  {
    this.users.forEach(user=>user.hideThis=true)
    this.users.forEach(user=>{
      user.subItemsList.forEach(subItem=>{
        subItem.hideThis=true
      })
    })
  }
  ...repeat the same process for other options and elements...
}

Personally, I prefer using consistent variable names for clarity. It can be confusing when variables have random names.

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

What is the best way to create an HTML form on-the-fly from a JSON object?

Could someone please assist me in understanding how to dynamically generate an HTML form based on a JSON object using JavaScript? ...

javascripthtmljsondynamic

Is it possible for web browsers to set a timeout on an XmlHttpRequest while it is still active?

When dealing with asynchronous XMLHttpRequests that take a long time to retrieve data from the server, I am searching for a way to abort them. Setting a timeout before sending the XHR is not feasible due to the length of these requests. Although calling X ...

javascriptajaxxmlhttprequesttimeoutabort

Storing ng-change event for a checkbox in AngularJS in a valid manner

I have a requirement where I need to handle multiple input checkboxes. The goal is to store the changed checkbox events in an array and then save them when the user submits the changes. <td><input type="checkbox" class="switch" ng-model="each_val ...

javascriptjqueryhtmlangularjscheckbox

Do we need to utilize a server folder in Nuxt 3 if we have API endpoints?

In Nuxt 3, there is a dedicated server folder containing an api subfolder. Why should we utilize this when we already have API endpoints built with a server-side programming language like Laravel? Are they linked in any way? For instance, consider these ...

javascriptvue.jsvuejs3nuxt.jsnuxt3

Having trouble with v-model not updating the data value on a dropdown in Vue.js?

When I set the initial value on the data property, the dropdown option is correctly displayed. However, if I select a different value from the dropdown, the data property does not update accordingly. <select class="form-control" ...

javascriptvue.js

Access-Control-Allow-Origin does not permit AngularJS Origin http://localhost:8080

I'm working on a web application using AngularJS. It's an admin interface that depends on a json-rpc API hosted on a different domain. When testing in my local environment, I encountered the error "Origin http://localhost:8080 is not allowed by ...

javascriptphpangularjs

Exposing external variables within the setInterval function

Here is the snippet of code I am working with: update: function(e,d) { var element = $(this); var data = element.data(); var actor = element.find('.actor'); var value = basicdesign.defaultUpdate( e, d, element, true ); var on = templateEn ...

javascriptsetintervalclearinterval

JavaScript code does not run when a page is being included

On my AngularJS-based page, I have included some additional HTML pages like this: <div data-ng-include src="includehtml"></div> Here is the JavaScript code: $scope.selectImage = function(id) {$scope.includehtml = id;} (I pass the HTML file ...

javascripthtmlangularjs

Is it possible to trigger the eventListener just once for every instance of my constructor?

I have a common property that is shared among all instances of my constructor: function Me() { } Me.prototype.window = {}; I want to update this property when the window is resized, but I only want it to happen once for each resize event, regardless of h ...

javascriptconstructor

AngularJS - Refreshing Controller when Route Changes

Scenario app.controller('headerController', ['$scope', '$routeParams', function($scope, $routeParams) { $scope.data = $routeParams; }]); app.config(['$routeProvider', function ($routeProvider) { ...

javascriptangularjssingle-page-application

Creating a div that becomes fixed at the top of the page after scrolling down a certain distance is a great way to improve user experience on a

I am struggling to create a fixed navigation bar that sticks to the top of the page after scrolling 500px, but without using position: fixed. Despite trying various solutions, none seem to work due to the unique layout of my navigation bar. Strangely enoug ...

javascriptjqueryhtmlcss

New issue with installing npm cra

Recently updated to npm version 6.14.4 and encountered an issue while trying to create a new app with cra-template. How can I resolve this problem? npx create-react-app sphinx.ui.react Error Log 50 timing stage:runTopLevelLifecycles Completed in 5234ms ...

javascriptnode.jsjsonnpm

Add an event to your Fullcalendar with a date that is not the same as the present date in your MySQL database

I currently have Fullcalendar set up to display events from a MySQL table (title + datetime) and allow users to add new events by clicking on a specific day within the calendar. However, I am facing an issue where it only adds events to the current day ev ...

javascriptjqueryajaxfullcalendar

How can you switch the property of an object in VueJS?

I am currently working with an array called cars, which contains names of cars as well as a property called starred. My goal is to toggle the value of starred between true and false for each car, ensuring that only one car can have starred set to true at a ...

javascriptvue.jsvuetify.js

Optimal method for efficiently caching data when toggling between list view and detail view within Angular 12

In my Angular App, I have implemented two components - a list view and a details view. Users can switch between these components, both of which utilize multiple async pipes. To minimize the number of http requests to the backend, I decided to cache data u ...

angularrxjs

How to manually close the modal in Next.js using bootstrap 5

Incorporating Bootstrap 5.2 modals into my Next.js application has been smooth sailing so far. However, I've encountered an issue with closing the modal window after a successful backend request. To trigger the modal, I use the data-bs-toggle="modal" ...

javascriptreactjstwitter-bootstrapnext.jsbootstrap-5

Having trouble using jQuery's .off() method to remove an event handler?

I'm facing an issue with my jQuery code where the .off('click') method doesn't seem to be working. I've tried removing the event binding from '.reveal-menu', but it's not working as expected. The initial animation wo ...

javascriptjqueryhtmlcss

Having difficulty altering the div color in real-time using VueJS

I'm currently in the process of building an application with Bootstrap and VueJS. My goal is to create a folder structure similar to Google Drive, where I want to make a div stand out in blue once it's selected. Below is the code snippet: ex ...

javascriptjqueryhtmlcssvue.js

Leveraging Observables in an Angular 2 component to broadcast data to multiple components

Is it possible to utilize Observables in components and which other components can subscribe to them? BugListComponent - The component is injected in the boot.ts file where all services are loaded (where bootstrap is located) import {Subject, BehaviorSub ...

asynchronousangularreactive-programmingobservable

AJAX request made to a specific local directory, instead of the usual localhost

Currently, I am working on a project to create a database that can be filtered using various options. My approach was to keep it simple by using HTML for sliders and checkboxes, along with JavaScript/jQuery for filtering the results. This setup allows me t ...

javascriptjqueryajax