如何在Angular2中使用Selectize.js？

我试图用Angular2实现Selectize.js，但我似乎无法使它工作。下面是我在HTML组件已经试过：如何在Angular2中使用Selectize.js？

<div class="form-group"> 
    <label for="friends">Friends</label> 
    <input type="text" class="form-control" #friends 
      [(ngModel)]="user.friends" name="friends" 
      #picture="ngModel"> 
    </div>

而在组件：

declare let $: any; 

@Component({ 
    selector: 'app-profile', 
    templateUrl: './profile.component.html', 
    providers: [ AuthenticationService, UserService, MessageService ] 
}) 
export class ProfileComponent implements OnInit, AfterViewInit { 
    @ViewChild('friends') el:ElementRef; 

    constructor(
    private _userService: UserService, 
    private _authService: AuthenticationService, 
) { } 

    ngAfterViewInit() { 

    $('#friends').selectize({ 
     delimiter: ',', 
     persist: false, 
     create: function(input) { 
     return { 
      value: input, 
      text: input 
     } 
     } 
    }); 
    } 

    ngOnInit() { 

    //... 
    } 

    onSubmit(event) { 
    //... 
    } 

}

所以我想要做的仅仅是在朋友输入实现Selectize。我希望用户能够写出他的朋友的名字，然后用一组名字在Angular中恢复它们。

但是在界面中没有任何反应，Selectize没有做任何事情。怎么来的？

来源

2016-11-16 Nope

双向数据绑定selectize在angular2中不起作用，所以摆脱那些ngModels。相反，这是我做的是落实onItemAdd和onItemRemove功能selectize，像这样：

activateSelectize() { 
    var $selecitize= jQuery('.selectize'); 

    this.select= $selectize.selectize({ 
     delimiter: ',', 
     create: (input) => { 
      return { 
       value: input, 
       text: input 
      }; 
     }, 
     onItemAdd: (value) => { 
      this.updateValue({selected: value}); 
     }, 
     onItemRemove: (value) => { 
      this.updateValue({deselected: value}); 
     }, 
    }); 
}

这是HTML：

<select class="selectize"> 
     <option *ngFor="let option of options" value="{{option[0]}}">{{option[1]}}</option> 
</select>

来源

2016-12-15 01:42:18 Rob

为了希望使这个更容易一点我已经创建了github & npm上的ng2-selectize组件。

它的用法可能是：

export class MultiSelectExampleComponent { 
 
    options = [{ 
 
\t \t label: 'Angular 2', 
 
\t \t value: 'angular2' 
 
\t }, { 
 
\t \t label: 'ReactJS', 
 
\t \t value: 'reactjs' 
 
\t } 
 
    ]; 
 
    config = { 
 
    labelField: 'label', 
 
    valueField: 'value', 
 
    highlight: false, 
 
    create:false, 
 
    persist:true, 
 
    plugins: ['dropdown_direction', 'remove_button'], 
 
    dropdownDirection: 'down', 
 
    maxItems: 5 
 
    }; 
 
    placeholder: string = 'Placeholder...'; 
 
    value:string[]; 
 

 
    onValueChange($event) { 
 
    console.log("Option changed: ", $event); 
 
    } 
 
}

<div class="example"> 
 
    <ng2-selectize [config]="config" [options]="options" [placeholder]="placeholder" [(ngModel)]="value" (ngModelChange)="onValueChange($event)"></ng2-selectize> 
 
</div>

来源

2017-01-05 05:37:19 NicholasAzar

如何在Angular2中使用Selectize.js？

回答

相关问题