2016-02-03 12 views
24

を選択するために、私は、単一選択のためのngModelを使用して結合することができるが、私は、複数の選択したオプションに配列をバインドしたいと思います。私はこれをしようとすると、私はあなたがあなた自身のように実装することができ、エラーAngular2:どのようにバインド複数

は「myModelProperty」

でマイコード

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

https://github.com/angular/angular/issues/4427 –

+0

を参照してください。angle2コードのコードが必要な場合は、これを私のangular2コードで使用しています(http://stackoverflow.com/a/27547021/5043867)。投稿してください –

+0

明らかにまだ実装されていません。 https://github.com/angular/angular/issues/6830 –

答えて

2

を異なるサポート対象「XXX」を見つけることができません取得します私の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; 
     }) 
    } 
    } 
} 

http://imgur.com/2P383hS

+0

'e.values'はubuntu Linuxでエラーを表示する関数ではありません。 –

+0

私は完全にうまく動いていて、私はUbuntuもデュアルブートするクロムブックを持っています。 – inoabrian

+0

私はその時何が原因か分からない! –

1

angular2で純粋なJavaScriptを使用して、複数のオプションを選択/選択したために別の方法。ここで私たちが.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はここにある: - .TSファイルまたは我々が記述する必要がコンストラクタで

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

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"); 
    } 
16

ここには、双方向データバインディングをサポートする複数選択リストの実装があります。私はgetElementById()の代わりに@ViewChildを使用します。

@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プロパティは、いくつかのコンポーネントのロジックによって変更されるたびに、ボタン・コールバック・ロジック「1及び3を選択」に示されているように、updateSelectList()はまた、呼び出されなければなりません。簡単に再利用のための

、これはおそらく属性ディレクティブにリファクタリングする必要があります。他の人が言ったように(任意の受験者は?)

7

、それはまだAngular2ではデフォルトでサポートされていません。私はこれを投稿すると思った、それははるかに簡単な回避策のようだ。setSelected機能付き

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

そしてmyClass:ここではサンプルHTMLで

... 
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; }); 
1

使用ng-select

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

ここの項目は、あなたが選択したelement.selected要素の選択を解除するときlist.removeイベント火災として表示したいアレイを使用すると、アレイのアイテムから何かを選択すると、すべてのものは複雑なぜソナリによって追加

回答が

7

をrupela解雇されています簡単な質問についての答え。

事前に選択しなければならないオプションがある場合は、あなたは、単にこのようにそれを行うことができます。

このコードは、良いです:

HTML

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

アンガー

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

か、文字列を持っている場合、あなたはそう

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

それを解析することができ、あなたが行ってしなければならないすべては、selectタグから[(ngModel)]は、角部で初期化しなければならないことです[value]オプションタグから

これは自動的に1つ以上のオプションを配列からの値に応じて選択します。

+0

ありがとう。これは私のために働く。 –

関連する問題