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;
}
Related
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']
}
}
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.
What i´m trying to do is to prevent default event on (ionChange).
I want to be able to set the checkbox checked= true or checked= false
If a condition is true or false.
<ion-item *ngFor="let classroom of teachersClassrooms">
<ion-label>{{classroom.name}}</ion-label>
<ion-checkbox color="royal" [checked]="classroom.is_set" (ionChange)="updateClassroom(classroom, $event)"></ion-checkbox>
</ion-item>
updateClassroom(item, cbox: Checkbox){
//cbox.preventDefault(); ------> Not Work
if(something){
cbox.checked = true
}else{
cbox.checked = false
}
}
The comments above are a better approach to the ultimate problem. But to answer the question "what i'm trying to do is to prevent default event on ionChange", the following works in an Ionic 4 template:
<ion-checkbox (click)="$event.stopPropagation()" (ionChange)="doSomething()"></ion-checkbox>
I have an app with ion-range UI element that is bound to a var using [(ngModel)] (2way) and then i have (ionChange) event that triggers a function that uses the value of ion-range.
Sometimes I need to "set" the range to a specific position by directly changing the var which is bound to ngModel, but I need to avoid triggering ionChange during this operation.
if I do that straightforward (see changeValue method) - the ionChange event will fire the moment the data changes and I need to avoid that (I need to place knob into a new location without triggering the event)
I used a trick with a flag (see changeValueViaFlag method) - now it works as expected, note I also have to use timeout, cause if I don't delay setting flag back to its "normal" state - angular's change detection won't pick up;(
UPDATE:
I tried the trick with ngModelChange which can be found in SO here: ionChange - detect changes only from view to model in Ionic 2 - the problem is with ngModelChange - I am not getting the same "change detection" as I get with ionChange...
So in my app the range is used to select color intensity. If I switch to ngModelChange - shape color intensity is not happening...;/
Question: is there a better way to achieve what I want?
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
private testRange: number = 20;
private flag: boolean = true;
constructor(
public navCtrl: NavController,
) {
}
logRange($event) {
if (this.flag) {
console.log("ionChange emitted: ",$event.value, this.testRange)
}
}
changeValue() {
this.testRange = 10;
}
changeValueViaFlag() {
this.flag = false;
this.testRange = 10;
setTimeout(()=>{
this.flag = true;
}, 500)
}
}
<ion-header>
<ion-navbar>
<ion-title>
Ion range test case
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-range [(ngModel)]="testRange" (ionChange)="logRange($event)">
</ion-range>
<button ion-button (click)="changeValue()">Change range value to 10</button>
</ion-content>
click is a DOM event, not related to the higher level ngModel. The proper event for this is ngModelChange. If you want to use DOM events, then forget about ngModel and use $event inside the handler or a #ref.
So, instead of
<input [(ngModel)]="item.completed" (click)="completed(i)" type="checkbox">
it should be
<input [(ngModel)]="item.completed" (ngModelChange)="completed(i)" type="checkbox">
How can I using checkbox for select one (just like radio), my code:
<div *ngFor="let address of addresses; let i = index;">
<ion-item>
<ion-checkbox id="cb_{{address.id}}" (ionChange)="selectedAddress(address.id,addresses,i)" checked="false"></ion-checkbox>
</ion-item>
</div>
in ts file:
selectedAddress(id,addresses,index){
for(let i=0; i<addresses.length; i++){
if(index != i){
document.getElementById("cb_"+addresses[i].id).checked = false;
}
}
}
but it is not working, anyone know how to achieve it? thanks a lot
Bind address.checked = false; kind thing when page is loading using for loop or using the API.
pass address object trough
selectedAddress(address,addresses,i) method.
in.ts
selectedAddress(address,addresses,i)
{
address.checked = !address.checked;
}