I have a field which opens a list having ion-radio.On selection of an option it shows the selected value as checked and when i open the list again, the checked value is not shown.
here is my code:
code to show the options in modal controller :
let modal = this.modalCtrl.create(ListComponent, { selectEmpType: type, selectValue: value, customiseColor: this.customiseColor , formMrType :formMrType, limitedRoleList : this.limitedRoleList, formType:this.formType,defaultOU1:this.defaultOus[0],defaultOU2:this.defaultOus[1],defaultOU3:this.defaultOus[2]});
modal.onDidDismiss(data => {
if (data.type == 'single') {
this.setEmpValue(data.data, name); //data.data is the value that is selected from the list
}
}
in listcomponent.html:
<div *ngIf= "formMrType =='employee'">
<ion-list radio-group [(ngModel)]="relationship">
<ion-item *ngFor="let option of inputDatas">
<ion-label>{{option.EMPFullName}}</ion-label>
<ion-radio [checked]="option.checked" value="{{option.EMPFullName}}"></ion-radio>
</ion-item>
</ion-list>
</div>
how to show the selected option as checked when opening the list for second time.
Preferably, you should be using ion-select for such functionality..
If you are using latest ionic versions ion-radio-group
But even in your case..you can try something like this...
<ion-radio [checked]="option.checked" value="{{option.EMPFullName}}" (ionBlur)="optionBlur(option)"></ion-radio>
optionBlur(option){
if(!option['checked']){
option['checked'] = true;
}
else{
option['checked'] = !option['checked']
}
}
Related
I created an app with a register form in ionic 4 and angular. I want to do the following:
I have two ion-selects, one is for a countries list and that another is for phone codes list. The behavior i am looking for is: when a country is selected in the ion-select for countries, the corresponding telephone code must be selected automatically in the phone code ion-select.
This is my code:
ion-select for countries
<ion-select id="paisselect" formControlName="pais" (ionChange)="changeselect($event)" interface="popover">
<ion-select-option *ngFor="let c of countries" value="{{c.cod}}">{{c.name}}</ion-select-option>
</ion-select>
ion-select for phone code
<ion-select formControlName="phonecode" placeholder="Cod." interface="popover">
<ion-select-option *ngFor="let c of codetele" value="{{c.code}}" selected="{{codigoselected == c.code}}">{{c.code}}</ion-select-option>
</ion-select>
Here is the function i am using to update the phone code ion-select
changeselect($event){
console.log($event.target.value) ;
let item1 = this.countries.find(i => i.cod === $event.target.value);
console.log(item1) ;
this.codigoselected = item1.code;
console.log(this.codigoselected) ;
}
I am using the variable "codigoselected" to determine which country is selected. for this, in the ion-select-option i am using a condition to change the selected status of the option like this:
<ion-select-option *ngFor="let c of codetele" value="{{c.code}}" selected="{{codigoselected == c.code}}">{{c.code}}</ion-select-option>
The current behavior is like this:
I selected a country:
But the ion-select for phone codes seems not to be updated
But when I click on the field, the specific code is selected
I need to do clic under option is selected in order to field be refreshed:
So, how can I make the field for phone codes update automatically in the interface without the user clicking?
Try this, pass the phone code select element to your changeselect(event, phoneCodeSelect) function.
<ion-select id="paisselect" formControlName="pais" (ionChange)="changeselect($event, phoneCodeSelect)" interface="popover">
<ion-select-option *ngFor="let c of countries" value="{{c.cod}}">{{c.name}}</ion-select-option>
</ion-select>
Add #phoneCodeSelect to your phone code select element.
<ion-select #phoneCodeSelect formControlName="phonecode" placeholder="Cod." interface="popover">
<ion-select-option *ngFor="let c of codetele" value="{{c.code}}" selected="{{codigoselected == c.code}}">{{c.code}}</ion-select-option>
</ion-select>
Then in your function change the value of the select element manually, while also updating the phoneCode form control value.
changeselect($event, phoneCodeSelect){
console.log($event.target.value) ;
let item1 = this.countries.find(i => i.cod === $event.target.value);
console.log(item1) ;
this.yourFormGroup.value.phonecode = item1.code; // change yourFormGroup to what your variable's name is
phoneCodeSelect.value = item1.code;
}
So I know how to get the selected value using the ionChange event, but how do I get the selected index. For example if i was to select the 3rd value down in a dropdown how can I get the selected index (2) rather than the value selected?
You can do something like ths:-
<ion-select placeholder="Select One">
<ion-select-option value="id1">Value1</ion-select-option>
<ion-select-option value="id2">Value2</ion-select-option>
</ion-select>
By this when you will select any particular option, then on its change event you will get that object's id instead of the value in the controller.
I hope it helps.
This is what you can do to get the id. Add a local variable to your ion-select #selectedIndex. After add your value like this [value]=[prices.w, id]
<ion-select slot="end" (ionChange)="changePrice($event)" #selectIndex>
<ion-select-option text-uppercase [value]="[prices.w, id]" *ngFor="let prices of prodData?.prices; let id = index" >{{prices.w}}</ion-select-option>
</ion-select>
In your ts. Import ViewChild
import { Component, OnInit, ViewChild } from '#angular/core';
After reference your local variable
#ViewChild('selectIndex') selectedId: ElementRef;
then declare your ionChange() function changePrice(event) and add the following code
public changePrice(event) {
const childCount = this.selectedId['el']['childElementCount'];
this.selectedId['el']['childNodes'][`${childCount}`]['defaultValue'] = event.detail.value[0];
this.selectedId['el']['shadowRoot']['children'][1]['innerHTML'] = event.detail.value[0];
this.selectedId['el']['shadowRoot']['children'][1]['innerText'] = event.detail.value[0];
console.log(event.detail.value[1]);
}
logs your index
console.log(event.detail.value[1]);
Hope it works fine
I'm looking for some example but cannot see anyone googling it, just what i want is to hardcode 2 or 3 words, thank you so much. Do i have to look for on ionic 3? or in angular2 better?
In your html file:
<ion-searchbar type="text" debounce="500" (ionChange)="getItems($event)"></ion-searchbar>
<ion-list *ngIf="isItemAvailable">
<ion-item *ngFor="let item of items">{{ item }}</ion-item>
</ion-list>
in your ts file:
// Declare the variable (in this case and initialize it with false)
isItemAvailable = false;
items = [];
initializeItems(){
this.items = ["Ram","gopi", "dravid"];
}
getItems(ev: any) {
// Reset items back to all of the items
this.initializeItems();
// set val to the value of the searchbar
const val = ev.target.value;
// if the value is an empty string don't filter the items
if (val && val.trim() !== '') {
this.isItemAvailable = true;
this.items = this.items.filter((item) => {
return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
})
} else {
this.isItemAvailable = false;
}
}
Mohan Gopi's answer is complete, but in order to make use of the debounce attribute, you have to use the ionChange event instead of the ionInput event.
<ion-searchbar type="text" debounce="500" (ionChange)="getItems($event)"></ion-searchbar>
...
...
That way the event will trigger after the user stops typing (after 500 milliseconds have passed since his last key press), instead of whenever a key is pressed.
Just wanted to share something I tried myself. I have implemented the autocomplete from Angulars material design (https://material.angular.io/components/autocomplete/overview)
But it did not look exactly as the rest of the ionic input components. I also tried the ion-searchbar but I did not like the search input, I wanted a normal ion-input So I did this:
html:
<ion-list>
<ion-item>
<ion-label position="floating">Supplier*</ion-label>
<ion-input (ionChange)="onSearchChange($event)" [(ngModel)]="supplier"></ion-input>
</ion-item>
<ion-item *ngIf="resultsAvailable">
<ion-list style="width: 100%; max-height: 200px; overflow-y: scroll;">
<ion-item *ngFor="let result of results" (click)="supplierSelected(result)" button>
<ion-label>{{result}}</ion-label>
</ion-item>
</ion-list>
</ion-item>
</ion-list>
in component.ts:
resultsAvailable: boolean = false;
results: string[] = [];
ignoreNextChange: boolean = false;
onSearchChange(event: any) {
const substring = event.target.value;
if (this.ignoreNextChange) {
this.ignoreNextChange = false;
return;
}
this.dataService.getStrings(substring).subscribe((result) => {
this.results = result;
if (this.results.length > 0) {
this.resultsAvailable = true;
} else {
this.resultsAvailable = false;
}
});
}
supplierSelected(selected: string) :void {
this.supplier = selected;
this.results = [];
this.resultsAvailable = false;
this.ignoreNextChange = true;
}
Granted the question was about ion-searchbar but maybe somebody out there also wants to use a normal ion-input like me. There is no clear icon but I can live with that, or just add one next to the ion-input. Could be that there is a way to turn the ion-searchbar into a normal ion-input style? Can't find it though in the docs.
Once i select a dropdown value from a dropdown field i want a section in another div to be loaded
ngif would help me do this, but how could i add this as a condition for the display of that section
Any dropdown selected should open that section
Later would customise it to different other sections in a div to load based on selection of the different dropdowns values accordingly
This can be solve by using selectionchange event emmiter function, whenever you select a value from the dropdown you can call an eventemmiter function. See the code below:
Html Code:
<div>
<mat-select placeholder="Options"
(selectionChange)="onSelecetionChange($event.value)">
<mat-option value="individual ">Individual </mat-option>
<mat-option value="business">Business</mat-option>
</mat-select>
</div>
<div *ngIf="individual">
Individual Div
</div>
<div *ngIf="business">
Business Div
</div>
My ts code:
individual: boolean;
business: boolean;
onSelecetionChange( value: string ) {
if( value === 'individual') {
// You can add some service call or customize your data from here
this.individual = true;
}
if( value === 'business') {
// You can add some service call or customize your data from here
this.business = true;
}
}
I want to make an Ionic table that fetches the data from MongoDB.On double-clicking a row, it should be editable. I tried implementing getElementById(). But it's not supported in Ionic.
I'm advised you to use 'press' instead of 'double click' (because not supported by default).
Your solution will be appeared look like this:
Page.html:
<ion-item>
<ion-label stacked>Value:</ion-label>
<ion-input [disabled]="!item.editable" [(ngModel)]="item.value" (press)="setEditable(item)"></ion-input>
</ion-item>
Page.ts:
setEditable(item) {
item.editable = true;
}
Page.scss (optionally):
.text-input[disabled] {
opacity: 1;
}