Using Angular 8 & Bootstrap 4
I am trying to implement searching in a select tag using bootstrap-select library from https://developer.snapappointments.com/bootstrap-select/ .
Below is my html
<select class="form-control selectpicker" data-live-search="true" id="field_bankName" name="bankName" formControlName="bankName">
<option *ngIf="!editForm.get('bankName').value" [ngValue]="null"></option>
<option [ngValue]="paymentMethodOption.id === editForm.get('bankName').value?.id ? editForm.get('bankName').value : paymentMethodOption" *ngFor="let paymentMethodOption of paymentmethods; trackBy: trackPaymentMethodById">{{paymentMethodOption.bankName}}</option>
</select>
I call selectpicker js in my ngOnInit() function
(<any>$('.selectpicker')).selectpicker();
I already import the bootstrap-select.min.css in my styles.css, and it looks fine.
#import url(assets/css/bootstrap-select.min.css);
I also import the bootstrap-select.min.js in my index.html
<script src="assets/js/bootstrap-select.min.js"></script>
I have a problem in displaying data to select tag, I can't display the data. When I don't use the bootstrap-select library, the data is displayed fine.
But when I insert dummy options such as: "Halo" & "Bandung" like my code below, it shows both "Halo" & "Bandung", only. It doesn't show my data.
<select class="form-control selectpicker" data-live-search="true" id="field_bankName" name="bankName" formControlName="bankName">
<option *ngIf="!editForm.get('bankName').value" [ngValue]="null"></option>
<option [ngValue]="paymentMethodOption.id === editForm.get('bankName').value?.id ? editForm.get('bankName').value : paymentMethodOption" *ngFor="let paymentMethodOption of paymentmethods; trackBy: trackPaymentMethodById">{{paymentMethodOption.bankName}}</option>
<option value="">Halo</option>
<option value="">Bandung</option>
</select>
Related
I am using angular 5 and I want to select multiple inputs from the dropdown and store the selected input into an array.
<select multiple class="form-control " name="fea" ngModel size="3" >
<option *ngFor="let feature of features | async" [ngValue]="feature">
{{ feature.name }}
</option>
</select>
Here I am selecting multiple inputs correctly but how can I store selected values in an array?
Any help will be appreciated!
You can change option tag to below.
<option *ngFor="let feature of features | async" [ngValue]="feature" (click)="AddtoArray(feature.name)">
{{ feature.name }}
</option>
In you component,
array:any[]=[];
AddtoArray(feature:any){
this.array.push(feature);
}
You can simply use ngModel to add your selections to your model / array.
Kindly use something like below:-
<select multiple class="form-control " name="fea" ngModel size="3" [(ngModel)]="selectedFeatures">
<option *ngFor="let feature of features" [ngValue]="feature">
{{ feature.name }}
</option>
</select>
For a working solution, have a look at the below stackblitz:-
https://stackblitz.com/edit/angular-hyazbe?file=src%2Fapp%2Fapp.component.html
Don't forget to press shift key to make multiple selections.
PS: I have not used the async pipe in the code but it should work fine with it too.
This can easily be achieved using (change) event as follows:
<select multiple class="form-control " name="fea" [(ngModel)]="model" (change)="valueAdded(model)">
<option *ngFor="let feature of features | async" [ngValue]="feature">
{{ feature.name }}
</option>
</select>
And in .ts file
var **yourArray**:string[]; // define array
valueAdded(val){
**yourArray**.Push(val);
}
This will add the selected options from dropDown in array named as **yourArray**
I need a multi select for my form and I m using the bootstrap select picker but my select option data is loaded from API dynamically and I using ng-repeat to show the option in the select tag. But my select doesnt show up any options. May i know what wrong with my code?
If i use the default html5 multiple select it can show all the data rows.
<select class="form-control" ng-model="inputUserPermission" size="10" multiple required>
<option ng-repeat="salesPersonInSoaps in salesPersonInSoap" value="{{salesPersonInSoaps.FirstName}}">{{salesPersonInSoaps.email}}</option>
</select>
Use bootstrap select picker doesnt work.
<select class="form-control selectpicker" ng-model="inputUserPermission" multiple required>
<option ng-repeat="salesPersonInSoaps in salesPersonInSoap" value="{{salesPersonInSoaps.FirstName}}">{{salesPersonInSoaps.email}}</option>
</select>
Removing select-Multiple will fix it I suppose.
<select class="form-control selectpicker" ng-model="inputUserPermission" multiple required>
<option ng-repeat="salesPersonInSoaps in salesPersonInSoap" value="{{salesPersonInSoaps.FirstName}}">{{salesPersonInSoaps.email}}</option>
</select>
i ust use ng-options in a select element in angular js. and in select select i just wants to add a extra options at the beginning of options.my code ===>
<div class="form-group">
<select class="form-control select2" ng-options="(o.fullName+' ('+o.email+')') for o in SubTeamUserList track by o.id" name="SelectedUserList" ng-model="SelectedUserList" multiple data-placeholder="Search By User" style="width: 100%;">
<option value="" disabled>Select A User</option>
</select>
</div>
that is not working for me ? i dont know why.then i search on net and found some solution like =>
angularJS - add a Static option with ng-options
Add two extra options to a select list with ngOptions on it
Angular ng-options - Is there a way to add an option when the model contains a value not present in the options list?
after see above solutions i tried =>
<div class="form-group">
<select class="form-control select2" ng-options="" name="SelectedUserList" ng-model="SelectedUserList" multiple data-placeholder="Search By User" style="width: 100%;">
<option value="" disabled>Select A User</option>
<option ng-repeat="(o.fullName+' ('+o.email+')') for o in SubTeamUserList track by o.id">{{(o.fullName+' ('+o.email+')')}}</option>
</select>
</div>
after doing this this is also showing something like =>
but that is also not working for me i dont know why? can anybody help me ???
I would like to have a select with a placeholder in angularjs with bootstrap. The solutions I have found do not work with angular
Here is my angular markup:
<select ng-model="myModel"
ng-options="p.name for p in ..."
class="form-control list-selector required">
<option value='' disabled selected>Please Choose</option>
</select>
If someone has a working solution...
thanks :)
You need to add an empty option to your select:
<option value="">- Please Choose -</option>
Here is a working example: http://jsfiddle.net/DianaNassar/FShdc/
For Angularjs Versions and reactive forms , if you are using ngValue to bind values in options , the following type of solution will work:
<option value='' selected ng-value="null">Please Choose</option>
For Angular 2+ Versions something like this will work-
<select class="form-control"
formControlName="roomType"
(change)="changeRoomType($event)">
<option [ngValue]="null" selected>Room Type</option>
<option *ngFor="let room of roomTypes" [ngValue]="room">{{room}}</option>
</select>
For reference, check this link out-https://netbasal.com/angular-quick-tip-how-to-show-a-placeholder-in-select-control-bab688f98b98
Here is the code which i was tried. i tried to add placeholder with angularjs code and html code but it is not working in both the case. please help me or suggest me how to do in this case
<select ui-select2="select2Options"
style="width:100%"
ng-model="SelectedProcessandIngredients"
data-placeholder="Select or Add Process/Ingredient"
ng-options="c.name group by c.status for c in colors"
ng-change="selectedinnerLoop()" >
</select>
Angular js Code:
$scope.select2Options = {
placeholder : "Select or Add Process/Ingredient",
formatResult : processList,
formatSelection : processList,
escapeMarkup : function (m) {
return m;
}
};
Add an empty option tag inside your select tag and the placeholder will be shown.
Also, use ng-repeat instead of ng-options. Select2 is incompatible with ng-options.
<select ui-select2 ng-model="select2" data-placeholder="Pick a number">
<!-- empty option gets placeholder working -->
<option value=""></option>
<!-- ng-repeat to populate dynamic options -->
<option ng-repeat="number in range" value="{{number.value}}">{{number.text}}</option>
</select>