Угловой множественный выбор - PullRequest
Новая
       9

Угловой множественный выбор

0 голосов
/ 13 марта 2019

Я хотел бы создать раскрывающуюся функцию множественного выбора в угловом режиме с помощью начальной загрузки 4. Ниже приведено изображение ниже.

enter image description here

Ниже приводится моя реализация на данный момент. 

             <div class="form-group">
                      <label>Employee privilege</label>
                      <select id="employeePrivelege" data-style="btn-default" 
                      class="selectpicker form-control" 
                      formControlName="employeePriveleges"
                      multiple data-max-options="2">      
                        <option selected>Mustard</option>
                        <option selected>Barbecue</option>
                          </select>
                    </div>

У меня 2 проблемы

  1. Элемент не будет выбран, если я добавлю атрибут selected в option

Я знаю, что это происходит из-за того, что я не использую jQuery и не хочу добавлять JQuery, поскольку это не рекомендуется в Angular.

У меня есть вопросы

  1. Какой самый простой вариант реализации компонента с несколькими выпадающими интерфейсами в Angular с или без начальной загрузки 4

Ответы [ 3 ]

5 голосов
/ 13 марта 2019

Я попробовал ваш код, но у меня отлично работает выбранный атрибут.

Я создал фрагмент в w3schools, который показывает, что он работает: ссылка на фрагмент

Похоже, что он не выбран, потому что выбранные параметры неактивны, поскольку элемент управления неактивен. Если вы добавите другую опцию, которая не выбрана, вы увидите разницу. Я создал еще один фрагмент здесь .

Мой упрощенный код выглядит так: 

<select name="Sauces" multiple>
  <option value="Mustard">Mustard</option>
  <option selected value="Barbecue">Barbecue</option>
  <option value="Ketchup">Ketchup</option>
  <option selected value="Mayonaise">Mayonaise</option>
</select>

Также я нашел угловой компонент, который прекрасно работает:

https://www.npmjs.com/package/ng-multiselect-dropdown

Я создал стек, демонстрирующий компонент с вашими данными здесь

Надеюсь, это поможет вам в дальнейшем.

2 голосов
/ 13 марта 2019

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

<mat-select placeholder="Select Units" formControlName="unit">
                            <mat-option *ngFor="let unit ofUnit" [value]="unit.slug">
                              {{unit.unit_name}}
                            </mat-option>
                          </mat-select>
1 голос
/ 13 марта 2019

Эта кодовая ручка имеет мультиселектор Bootstrap 4, очень похожий на то, что вы показываете. ссылка . Когда я добавил, выберите первый, например: 

<select class="custom-select" id="basic" multiple="multiple">
   <option value="cheese" selected>Cheese</option>
   <option value="tomatoes">Tomatoes</option>
   <option value="mozarella">Mozzarella</option>
   <option value="mushrooms">Mushrooms</option>
   <option value="pepperoni">Pepperoni</option>
   <option value="onions">Onions</option>
</select>

Сработало как положено.

...