I am trying to write a dropdown list for selecting country, is possible to add flag of country next to the country name??
<div class="chosen-input-group col-sm-10 ">
<select id="country_type" chosen data-placeholder="-- 國家 --" disable-search="false"
ng-options="country_.country_id as country_.name for country_ in vm.country_data"
ng-model="vm.item.country_id">
<option value=""> -- 國家 --</option>
</select>
</div>
You could use ng-repeat on the option tag and then style the option with the image as you want it
<select >
<option ng-repeat="country_ in vm.country_data"
value="country_.country_id"
style="background-image:url({{country_.name}}.png);">
{{ country_.name }}
</option>
</select>
It is not possible using a native select with options.
Have a look to https://github.com/angular-ui/ui-select
Soruce : Angular select with images
I added the icon directly to the ng-template tag, and it works:
<ng-select [clearable]="false" [searchable]="false" [items]="items" bindLabel="libelle" [(ngModel)]="selectedItem">
<ng-template ng-label-tmp let-item="item">
<i class="fa fa-eye"></i>
<b> {{item.libelle}}</b>
</ng-template>
<ng-template ng-option-tmp let-item="item" let-index="index">
<i class="fa fa-eye"></i>
<b> {{item.libelle}}</b>
</ng-template>
</ng-select>
Related
I want to add some fontawesome icons to status of user when is active or inactive... etc. I am trying with this code:
<td>
<select class="statusSelect" data id="{{$user->id}}">
<option {{getStatus($user->status) == 'Active' ? 'selected' : ''}} value="a">
<i class="fa fa-minus-circle text danger"></i>
<strong> {{__('home.active')}} </strong>
</option>
<option {{getStatus($user->status) == 'Wait' ? 'selected' : ''}} value="w">
<i class="fa fa-minus-circle text-warning"> </i>
<strong> {{__('home.wait')}} </strong>
</option>
<option {{getStatus($user->status) == 'Banned' ? 'selected' : ''}} value="b">
<i class="fa fa-minus-circle text-danger"> </i>
<strong> {{__('home.ban')}} </strong>
</option>
</select>
</td>
I also read this but doesn't work in my case.
Html option tag's permitted content is only text. You are trying to adding html content inside option tag. That's why browser clears what you inserted.
In blog post which you shared, it works with JavaScript. It reads option's data- attribute and replace(or wrap and hide.) <select> (which contains options) with custom html structure it looks like select component but not really is.
You can create your custom selectbox with JavaScript or find dozens examples in web.
Check this out: https://thdoan.github.io/bootstrap-select/examples.html
what font-awesome version did you use? and did you try with the data-content attribute? cause using “data-content” attribute we can insert custom HTML into the options such as font-awesome tags.
Maybe like this code:
<select class="selectpicker">
<option data-content="<i class='fa fa-address-book-o' aria-hidden='true'></i>Option1"></option>
<option data-content="<i class='fa fa-calculator' aria-hidden='true'></i>Option2"></option>
<option data-content="<i class='fa fa-heart' aria-hidden='true'></i>Option3"></option>
</select>
whenever I use [(ngModel)] first value becomes empty. but when I remove [(ngModel)] it is working fine.
<select class="custom-select" id="campaignDropdown" [(ngModel)]="campaignInfo" placeholder="Select Campaign" (change)="hitApiFunction(campaignInfo)">
<option value="" disabled selected>Select Campaign</option>
<option *ngFor="let campData of campaigns" [ngValue]="campData">
{{campData.campaign_name}}
</option>
</select>
By #Krishna Rathore
You can use [value]="" selected hidden
I have create a demo on Stackblitz
<form role="form" class="form form-horizontal" (ngSubmit)="onSubmit()" #form="ngForm" ngNativeValidate>
<div class="form-group row">
<div class="col-xl-4 col-lg-6 col-md-12">
<fieldset class="form-group">
<label for="customSelect">Categories:</label>
<select class="custom-select d-block w-100" id="Category" [(ngModel)]="Category" name="Category" required placeholder="d.ff">
<option hidden [value]="" selected>Select one category </option>
<option *ngFor="let item of myBusinessList" [value]="item.id">{{item.name}}</option>
</select>
</fieldset>
</div>
</div>
<button type="submit" class="btn btn-raised btn-danger">Save</button>
</form>
thank you everyone who tried to give an answer... its working fine now, correct ans is....
<select class="custom-select" id="campaignDropdown" [(ngModel)]="campaignInfo" (change)="hitApiFunction(campaignInfo)">
<option [value]="0" disabled selected>Select Campaign</option>
<option *ngFor="let campData of campaigns" [ngValue]="campData">
{{campData.campaign_name}}
</option>
</select>
and in ts file
campaignInfo=0;
Try to assign the campaignInfo variable with the placeholder text in your component.ts file.
e.g
export class CampaignComponent{
campaignInfo : any = "";
}
the reason behind such behavior of the placeholder being empty is you are adding ngModel in your dropdown and it is not assign with any text yet.
It will work for you because you have option tag value attribute as = ' ' for option Select Campaign thats why assign empty string for campaignInfo variable.
I can't fixed this anymore. please help!
I already tried: required="required" also
<span class="channel">
<select class="selectpicker" name="channel_id" data-style="btn btn-link" id="exampleFormControlSelect1" required="true">
<option>Channel</option>
#foreach($channels as $channel)
<option value="{{ $channel->id }}">{{ $channel->title }}
</option>
#endforeach
</select>
</span>
If there is any other option in Bootstrap 4 please let me know.
I would like to pass in an attribute from an api call to a submit function and not sure why it isn't working. I am thinking it has something to do with an option select or reformatting the input.
Experiencing the error Error: No value accessor for form control with name: 'employee_id'
form.component.html
<select>
<option
*ngFor="let employee of employees"
name="employee_id"
[(ngModel)]="employee_id">
{{ employee.name }}
</option>
</select>
<button
(click)="submitMeetingRequirements()"
class="btn btn-success">
Suggest Meeting
</button>
and this is the submit function from form.component.ts
submitMeetingRequirements() {
this._meetingService.submitMeetingRequirements(
this.employee_id)
.subscribe(res => this.suggestions = res["suggestions"])
}
Fixed with
<select [(ngModel)]="employee_id" name="employee_id">
<option
*ngFor="let employee of employees"
value="{{employee.id}}">
{{ employee.name }}
</option>
</select>
Use the [(ngModel)] on the select tag and not the option tag. Something like this:
<select [(ngModel)]="employee_id">
<option
*ngFor="let employee of employees"
name="employee_id" >
{{ employee.name }}
</option>
</select>
<button
(click)="submitMeetingRequirements()"
class="btn btn-success">
Suggest Meeting
</button>
Here's a Working Sample StackBlitz for your ref.
I'm trying to add a new row to the current table so that I can have a row under the list of data that can have a save button and an insert to be done e.g. save phone number. I have added html comments of where the new row will go but not sure how to do it in PrimeNg.
See the code below:
<div class="m_datatable m-datatable m-datatable--default m-datatable--loaded">
<p-dataTable [value]="personPhone.phones"
emptyMessage="{{l('NoData')}}"
paginator="false"
rows="5"
tableStyleClass="m-datatable__table">
<p-column header="{{l('Actions')}}" [style]="{'width':'130px','text-align':'center'}">
<ng-template let-record="rowData" pTemplate="body">
<button (click)="deletePhone(phone, personPhone)" class="btn btn-outline-danger m-btn m-btn--icon m-btn--icon-only m-btn--pill">
<i class="fa fa-times"></i>
</button>
</ng-template>
</p-column>
<p-column header="{{l('PhoneType')}}">
<ng-template let-record="rowData" pTemplate="body">
{{getPhoneTypeAsString(record.type)}}
</ng-template>
</p-column>
<p-column header="{{l('PhoneNumber')}}">
<ng-template let-record="rowData" pTemplate="body">
{{record.number}}
</ng-template>
</p-column>
<!--New row to go here-->
</p-dataTable>
</div>
I Just want a row like this:
<tr>
<td>
<button (click)="savePhone()" class="btn btn-sm btn-success">
<i class="fa fa-floppy-o"></i>
</button>
</td>
<td>
<select name="Type" [(ngModel)]="newPhone.type" class="form-control">
<option value="0">{{l("Mobile")}}</option>
<option value="1">{{l("Home")}}</option>
<option value="2">{{l("Business")}}</option>
</select>
</td>
<td><input type="text" name="number" [(ngModel)]="newPhone.number" class="form-control" /></td>
</tr>
First find the length of the data what you are getting like below?
public dataLength:number;
this.myService.getAllResult('query)
.subscribe((response: any[]) => {
this.data = response
this.dataLength = this.data.length;
}
Now in p-template body take another row and use *ngIf and check the dataLength is greater than or equal to current Index:
<ng-template pTemplate="body" let-i="rowIndex" let-data>
<tr>
<td>{{i + 1}}</td>
<td>{{data.name}}</td>
<td>{{data.email}}</td>
</tr>
<tr *ngIf="i >= (dataLength -1)">Print your data</tr>
</ng-template>
I think there should be something like $last and $first index in primeNg as we have in angular for *ngFor.
If we find the last index in Prime Ng. Then no need to take the another dataLength. But Above solution should work for you.