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

Question

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.

javascript angular typescript

Answer 1

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.

Answer 2

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.

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

Answer №1

Similar questions

Implement a callback function for unchecked checkboxes on change

"Oops! Looks like there's a reference error - the function you're trying

Implementing a Collapse and Expand All feature within an Accordion Component

What is the best way to conceal a specific list item in an Angular 2 template?

Content must be concealed following the third paragraph

Access my web application to easily download Jira tickets in XML format with just a single click

Falling rain animation in JavaScript

Asynchronous Return in NodeJS Class Methods

Utilizing AJAX for showcasing the data from an XML document

Utilizing React Material UI for form validation with error handling and informative helper text

What is the proper way to request permission for allowing others to access the mailto function?

Having trouble understanding how to receive a response from an AJAX request

Encountering an error with [object%20Object] when utilizing ajaxFileUpload

Extract data from JSON object on the server side

The parameter type must be a string, but the argument can be a string, an array of strings, a ParsedQs object, or an array of ParsedQs objects

Using JavaScript's document.write method to display HTML code, along with a variable retrieved from a Flash application

What's the best way to use the like query in Mongoose?

Sorting an array of objects in TypeScript may result in a type error

Is the Angular 7 router '**' wildcard feature failing to work properly when used in conjunction with lazy loaded modules and child routes?

Can you suggest an alternative for the "return" statement within a "for loop" in order to retrieve all values from the loop?