Angular2: как связывать для выбора нескольких

Ответ 1

Здесь реализована реализация нескольких списков, поддерживающая двухстороннюю привязку данных. Я использую @ViewChild вместо getElementById().

@Component({
  selector: 'my-app',
  template: `{{title}}<p>
  <select #select multiple (change)="change($event.target.options)">
    <option *ngFor="#item of myOptions" [value]="item.value">
      {{item.name}}
    </option>
  </select>
  <br><button (click)="changeOptions()">select 1 and 3</button>
  <p>{{selectedValues | json}}`
})
export class AppComponent {
  @ViewChild('select') selectElRef;
  title = "Angular 2 beta - multi select list";
  myOptions = [ 
    {value: 1, name: "one"}, 
    {value: 2, name: "two"},
    {value: 3, name: "three"}];
  selectedValues = ['1','2'];
  myModelProperty = this.myOptions[0];
  constructor() { console.clear(); }
  ngAfterViewInit() {
    this.updateSelectList();
  }
  updateSelectList() {
    let options = this.selectElRef.nativeElement.options;
    for(let i=0; i < options.length; i++) {
      options[i].selected = this.selectedValues.indexOf(options[i].value) > -1;
    }
  }
  change(options) {
    this.selectedValues = Array.apply(null,options)  // convert to real Array
      .filter(option => option.selected)
      .map(option => option.value)
  }
  changeOptions() {
    this.selectedValues = ['1','3'];
    this.updateSelectList();
  }
}

Plunker

Всякий раз, когда свойство selectedValues изменяется некоторой логикой компонента, также нужно вызвать updateSelectList(), как показано в логике обратного вызова кнопки выбора "1" и "3".

Для более простого повторного использования это, вероятно, должно быть реорганизовано в директиву атрибута. (Любые берущие?)

Ответ 2

Почему все это затрудняет ответы на простой вопрос.

Если у вас есть параметры, которые нужно выбрать, вы можете сделать это следующим образом:

Этот код хорошо:

HTML

<select multiple [(ngModel)]="myModelProperty">
    <option *ngFor="#item of myOptions" [value]="item.value">{{item.name}}</option>
</select>

ANGULAR

myModelProperty: any;
myModelProperty = ['YOUR_VALUE', 'YOUR_VALUE'];

или если у вас строка, вы можете проанализировать ее

myModelProperty: any;
myModelProperty = string.split(',');

Итак, все, что вам нужно сделать, это то, что [(ngModel)] из тега select, должен быть инициализирован в части angular с некоторым массивом значений, которые соответствуют [value ] из тега параметра

Это автоматически выберет один или несколько параметров, зависящих от значений из массива.

Ответ 3

Как говорили другие, он еще не поддерживается по умолчанию в Angular2. Я думал опубликовать это, это выглядит гораздо более простым способом. Вот пример HTML:

<select multiple (change)="setSelected($event.target)">
    <option *ngFor="#item of myOptions" [value]="item.value">{{item.name}}</option>
</select>

И myClass с функцией setSelected:

...
export class myClass { 
    ...
    myOptions: [];
    ...
    setSelected(selectElement) {
        for (var i = 0; i < selectElement.options.length; i++) {
            var optionElement = selectElement.options[i];
            var optionModel = this.myOptions[i];

            if (optionElement.selected == true) { optionModel.selected = true; }
            else { optionModel.selected = false; }
        }
    }
}
...

В любое время, когда вам нужна ссылка на выбранные элементы, вы можете использовать:

var selectedItems = this.myOptions.filter((item) => { return item.selected === true; });

Ответ 4

Вы можете реализовать свои собственные, как в моем plnkr. ОБНОВЛЕНО, потому что CHOW хотел получить пример без jquery.

http://plnkr.co/edit/Pf92XATg3PT5RtBvrsaA?p=preview

//our root app component
import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  styles:['.options{cursor:pointer;padding:10px;border-bottom:1px solid black;}', '.multiple-select{overflow-y:scroll; height:100px;}'],
  template: `
      <h3>{{selected|json}}</h3>
      <div class="multiple-select col-lg-6 col-md-6 col-sm-6 col-xs-6" style="">
        <div class="options col-lg-12 col-md-12 col-xs-12 col-sm-12" *ngFor="#athlete of athletes" id={{athlete.id}} (click)="toggleMultiSelect($event, athlete)">{{athlete.name}}</div>
      </div>
  `,
  directives: []
})
export class App {
  public athletes:any[]=[];
  public selected:any[]=[];
  constructor() {
    for(var i = 1; i <= 5; i++){
      this.athletes.push({
        value:i,
        name:("athlete-"+i),
        id:("id-"+i)
      })
    }
  } 
  toggleMultiSelect(event, val){
    event.preventDefault();
    if(this.selected.indexOf(val) == -1){
      this.selected = [...this.selected, val];
      var elem = document.getElementById(val.id);
      elem.className += " fa fa-check";
    }else{
      var elem = document.getElementById(val.id);
      elem.className = elem.className.split(' ').splice(0, elem.className.split(' ').length - 2).join(' ');
      this.selected = this.selected.filter(function(elem){
        return elem != val;
      })
    }
  }
}

Ответ 5

Другой способ выбрать/выбрать несколько опций, используя чистый javascript в angular2. вот код, который мы должны написать в .html файле:

   <div class="multiselect">
      <div class="selectBox(click)="showCheckboxes('checkboxes1',batchEvent); batchEvent=!batchEvent">
        <select class="form-control">
          <option selected disabled>Select Batch</option>
        </select>
        <div class="overSelect"></div>
      </div>
      <div id="checkboxes1" style="display: none;">
         <div *ngFor="#batch of batch_array">
            <input type="checkbox" [value]="batch.id" id="E{{batch.id}}" (click)="batchSelectedEevent('E'+batch.id,batch.id)" /> {{batch.batch_name}}
         </div>
      </div>
  </div>

css находится здесь: -

.multiselect {
        width: 200px;
    }
    .selectBox {
        position: relative;
    }
    .selectBox select {
        width: 100%;
        font-weight: bold;
    }
    .overSelect {
        position: absolute;
        left: 0; right: 0; top: 0; bottom: 0;
    }

в файле .ts или в конструкторе мы должны написать:

batchEvent:boolean= false;

// Function for Multiple Select options checkbox area //

    showCheckboxes(ids, flag) {
        let checkboxes = document.getElementById(ids);
        if (!flag) {
            checkboxes.style.display = "block";
        } else {
            checkboxes.style.display = "none";
        }
    }

batchSelectedholiday(id, value) {
        // console.log(id, value);
        if ((<HTMLInputElement>document.getElementById(id)).checked == true) {
            this.batchHoliday_array.push(value);
        }
        else if ((<HTMLInputElement>document.getElementById(id)).checked == false) {
            let indexx = this.batchHoliday_array.indexOf(value);
            this.batchHoliday_array.splice(indexx, 1);
        }
        console.log(this.batchHoliday_array, "batchHoliday_array");
    }

Ответ 6

Используйте ng-select

<ng-select [multiple]="true" [items]="items" (selected)="selected($event)"
                        (removed)="removed($event)" placeholder="Select the technologies" required>
</ng-select>

Здесь элементы - это массив, который вы хотите отобразить как событие list.remove когда вы element.selected выделенный элемент element.selected запускаемое при выборе чего-либо из элементов массива.