Как сделать из нескольких частей выбрать фильтрацию angular - PullRequest
Новая
       22

Как сделать из нескольких частей выбрать фильтрацию angular

0 голосов
/ 27 апреля 2020

HTML

 <nz-dropdown class="filter-dropdown" [nzTrigger]="'click'" nzPlacement="bottomRight">
              <a nz-dropdown nz-tooltip nzTitle="Feature not functional">
                {{ activeFilter.filterBy }} <i nz-icon [type]="activeFilter.order === 'ASC' ? 'up' : 'down'"></i>
              </a>
              <ul nz-menu>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('filterBy', 'Application')">Application</li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('filterBy', 'Date')">
                  Date
                  <i nz-icon nzType="check" nzTheme="outline"></i>
                </li>
                <li nz-menu-divider></li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('status', 'ALL')">All</li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('status', 'ACK')">Acknowledged</li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('status', 'READ')">Read</li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('status', 'NEW')">New</li>
                <li nz-menu-divider></li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('order', 'ASC')">Ascending</li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('order', 'DESC')">Descending</li>
                <li nz-menu-divider></li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('grouped', true)">Grouped</li>
                <li class="filter-dropdown-item" nz-menu-item  (click)="handleFilter('grouped', false)">Ungrouped</li>
              </ul>
            </nz-dropdown>

TS 

 activeFilter = {
    filterBy: 'Date',
    length: 100,
    status: 'ALL',
    order: 'ASC',
    grouped: false
  };

handleFilter(targetFilter?: string, value?: any) {
    this.activeFilter[targetFilter] = value;

    console.log(this.activeFilter);
    if (targetFilter === 'order') {
      // ?direction = 'asc' || 'desc']
    }
  }

Как сделать фильтрацию выбора нескольких частей? Вот пример списка: https://i.stack.imgur.com/QJKAg.png

при выборе раскрывающегося списка должно быть значение по умолчанию, равное Date->All->Ascending->Ungrouped

, которое должно быть таким https://i.stack.imgur.com/GyEv1.png

1 Ответ

1 голос
/ 27 апреля 2020

Я изменил код по ссылке ниже

https://stackblitz.com/edit/angular-6zvbjl-uoffds

Я добавил условную иконку для каждого элемента фильтра 

 <i nz-icon nzType="check" *ngIf="activeFilter.filterBy=='Application'" nzTheme="outline"></i>

и в вашем Кнопка для статуса я написал функцию, потому что она имеет более двух вариантов. Для других я помещаю условие в html

<a nz-dropdown nz-tooltip nzTitle="Feature not functional">
        {{ activeFilter.filterBy }} ->  {{ statuName(activeFilter.status) }} ->  {{ activeFilter.order=="ASC" ? "Ascending" : "Descending" }} ->  
        {{ activeFilter.grouped? "Groupped" : "Ungrouped" }}
      </a>

 statuName(param){
    if(param=="ALL"){return "All"}
    else if(param=="ACK"){return "Acknowledged"}
    else if(param=="READ"){return "Read"}
    else if(param=="NEW"){return "New"}
  }

, а для вашего делителя я ставлю css код с именем класса 

.divider {
          height: 11px !important;
          margin: 4px 0;
          overflow: hidden;
          line-height: 0;
          background-color: #e8e8e887;
      }
...