1

Возникла необходимость сделать выпадающий список с возможностью множественного выбора (что-то вроде комбобокса с чекбоксами), и при этом связать его соответственно с переменной-массивом. Возможно ли это, если да, то каким способом?

Без Angular и Bootstrap нашел такой способ. Также пробовал использовать select с набором option, но как их грамотно связать с моделью? И неудобно осуществлять выделение в списке без checkbox.

2
  • habr.com/post/417137 первая ссылка в гугл
    – arturovt
    14 окт 2018 в 20:43
  • @overthesanity спасибо, с чекбоксами понятно, но как их внедрить в комбобокс?
    – Emm
    15 окт 2018 в 11:05

2 ответа 2

2
+50

Я не знаю какая цель стоит перед вами в реализации комбобокса, поэтому приведу маленький пример с интеграцией этого примера, от которого будем дальше отталкиваться. Пусть у нас будет select с чекбоксами того, что нужно сделать (todo):

// typings.d.ts

declare interface Todo {
    title: string;
    completed: boolean;
}

Создадим reusable компонент:

import { Component, ChangeDetectionStrategy, Input, ElementRef } from '@angular/core';

@Component({
    selector: 'app-combobox',
    templateUrl: './combobox.component.html',
    styleUrls: ['./combobox.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ComboboxComponent {
    @Input()
    public todos: Todo[] = [];

    public checkboxesShown = false;

    constructor(private host: ElementRef<HTMLElement>) {}

    public showCheckboxes(): void {
        this.checkboxesShown = !this.checkboxesShown;
    }

    public checkTodo(todo: Todo): void {
        this.host.nativeElement.dispatchEvent(new CustomEvent('checkTodo', {
            detail: todo
        }));
    }
}

Шаблон:

// combobox.component.html

<div class="multiselect">
    <div class="selectbox" (click)="showCheckboxes()">
        <select>
            <option>Выбрать что-то</option>
        </select>

        <div class="over-select"></div>
    </div>

    <div class="checkboxes" *ngIf="checkboxesShown">
        <ng-container *ngFor="let todo of todos; let index = index">
            <label [attr.for]="index">
                <input type="checkbox" [attr.id]="index" [checked]="todo.completed" (change)="checkTodo(todo)">
                {{ todo.title }}
            </label>
        </ng-container>
    </div>
</div>

<pre>{{ todos | json }}</pre>

Стили:

// combobox.component.scss

.multiselect {
    width: 200px;

    .selectbox {
        position: relative;

        select {
            width: 100%;
            font-weight: bold;
        }

        .over-select {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
    }

    .checkboxes {
        border: 1px #dadada solid;

        label {
            display: block;

            &:hover {
                background-color: #1e90ff;
            }
        }
    }
}

С этим компонентом мы будем взаимодействовать сверху - передавать ему data-bound свойства и слушать события:

import { Component, ChangeDetectionStrategy } from '@angular/core';

function getTodos(length: number): Todo[] {
    return Array.from({
        length
    }).map(() => {
        return {
            title: 'Купить кофе',
            completed: false
        };
    });
}

@Component({
    selector: 'app-root',
    template: `
        <app-combobox [todos]="todos" (checkTodo)="checkTodo($event)"></app-combobox>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
    public todos: Todo[] = getTodos(10);

    public checkTodo({ detail }: CustomEvent): void {
        this.todos = this.todos.map((todo) => {
            if (todo === detail) {
                todo.completed = !todo.completed;
            }

            return todo;
        });
    }
}

Для примера я создал функцию, которая генерирует массив todos заданной длины, слушаем событие checkTodo, когда Angular вызовет наш метод - мы меняем ссылку на массив, потому что если компонент маркирован как OnPush - то механизм обнаружения изменений запустится в случае изменения ссылки на входное свойство. В итоге получаем следующее:

введите сюда описание изображения

Стилизовать это вы можете как угодно на свое усмотрение, тут важно показать минимальную логику и подход, который нужно использовать, потому что в конечном итоге вы будете кастомизировать это под себя.

4
  • Никак не поборю ошибку Type 'ElementRef' is not generic, уже перепробовал разные версии ng-bootstrap, как советуют, например, здесь stackoverflow.com/questions/50780419/… - от 1.0.0 до 3.3.1. Сейчас использую Angular 5.2.8, typescript 2.7.2.
    – Emm
    21 окт 2018 в 15:35
  • 1
    @Emm, ммм, да, ElementRef универсальный с 6 энгулара, уберите просто перегрузку типа private host: ElementRef
    – arturovt
    21 окт 2018 в 16:14
  • ага, спасибо, перезагрузку убрал, как тогда будет выглядеть тело метода checkTodo(todo: Todo) ? все остальное работает
    – Emm
    21 окт 2018 в 19:15
  • @Emm, не понял вопроса про тело метода)
    – arturovt
    21 окт 2018 в 19:20
-1

Так в angular material есть select c option в виде checkbox, в чем проблема их использовать? К mat-select просто добавить свойство multiple. Вот здесь начиная с заголовка "Multiple selection" есть примеры: https://material.angular.io/components/select/overview.

4
  • 1
    это можно было бы использовать в проектах где используется сам material, а подключать пакет весом 1мб в прод сборке только из-за этого - плохое решение, к тому же с их дизайном
    – arturovt
    16 окт 2018 в 14:59
  • Тогда можно так: stackblitz.com/edit/angular-select-checkbox
    – KatyaKrym
    22 окт 2018 в 14:16
  • зачем использовать нативные средства браузера (getElementById)?
    – arturovt
    22 окт 2018 в 14:39
  • вы правы, пример отредактирован.
    – KatyaKrym
    23 окт 2018 в 9:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.