ng2-select 中设置默认值

2017-02-22阅读(5957)评论(0)牵着狗狗看MM

苏州实时公交查询

假设我们在template中添加了一个ng2-select

<ng-select  [allowClear]="true" [items]="selectGroup" (selected)="updateGroupSelected($event)" placeholder="请选择"></ng-select>

对里面的参数作下简单说明
allowClear:选择完select后,开启点击X,清除select内容
item:一个数组,也就是类似于select中的option,由id跟text这2个键值组成,如下

selectGroup = [{id:"1",text:"第一个option"},{id:"2",text:"第二个option"}]

selected:选完选项后触发的事件,如下

public updateGroupSelected(value: any): void {
    console.log(value)
  }

假如要在某个点击事件后,显示已经选中的select,(我这边的场景是选中某个用户,出现一个弹窗,弹窗中有select,默认显示该用户当前的组别)
template作如下修改(也就是增加一个ID 为defaultGroup)

<ng-select  #defaultGroup [allowClear]="true" [items]="selectGroup" (selected)="updateGroupSelected($event)" placeholder="请选择"></ng-select>

component中

import { SelectComponent } from 'ng2-select';
...
@ViewChild('defaultGroup') public ngSelectGroup: SelectComponent;

.....
updateGroupSelected(){
    this.ngSelectGroup.active = [];//这里定义默认选中的为一个空数组,此处可以另作处理,设置想要默认选中的option
    //例:this.ngSelectGroup.active= [{id:"1",text:"默认的option"}]
    .....
}

ng2-select官网

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » ng2-select 中设置默认值
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏