i'm having a weird issue on my ionic app. i'm trying to create a modal page where user may enter opening hour of something. there is each day inside my json.
when i try to click the button to add another hour in the day, the function is fired 7 times (one for each day). I don't understand why
Do you have an idea ?
<ion-list *ngFor="let day of json.days">
<ion-list-header>
{{day.title}}
</ion-list-header>
<ion-grid>
<ion-row>
<ion-col col-6><ion-datetime displayformat="HH:mm" pickerformat="HH mm" placeholder="00:00" ></ion-datetime></ion-col>
<ion-col col-6><ion-datetime displayformat="HH:mm" pickerformat="HH mm" placeholder="00:00" ></ion-datetime></ion-col>
</ion-row>
</ion-grid>
<button ion-button clear (click)="addHours(day.id, $event)">test</button>
</ion-list>
addHours(id,event){
event.preventDefault();
event.stopPropagation();
for (let key in this.json.days) {
console.log(this.json.days[id]);
}
}
Thank you for your help
Related
I'm doing an online bookstore project where you can also mark a book as booked. So I would like to assign a function to a button "mark as booked", once this button is pressed that item will have to have the parameter booked and disappear from the page and go to the "reserved books" page. my data I take from a local json and I do not know how to assign the parameter "booked" and make the item disappear if he had this parameter.
example of my page
html code:
<ion-content padding>
<ion-grid>
<ion-row>
<ion-col *ngFor="let libro of libri; let i =index;" >
<div>
<ion-card-header><h1>{{libro.title}}</h1></ion-card-header>
<ion-card-header (ngModelChange)="setYear($event)"><h3 >Autore:{{libro.author}}</h3></ion-card-header>
<ion-card-header><h4>Anno:{{libro.year}}</h4></ion-card-header>
<div id="immagine">
<img src="../assets/{{libro.imageLink}}">
</div>
<button ion-button (click)="modificaItem(libro)" color="">Modify</button>
<button ion-button (click)="remove(i);" color="danger" >Mark as booked</button>
<button ion-button color="{{libro.prenotato ? 'danger' : 'secondary'}}">Status</button>
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
(click)="remove(i);" is a provvisory function
I want to do a simple if else in Angular template. I'm using Ionic framework. What I want to do is something like
if (val != null){
document.write("No value");
}
else{
document.write("Has value");
}
What I have now is
<ion-grid *ngIf="devices">
<!-- Show if devices exist -->
<ion-row>
<ion-col>
<ion-list>
<ion-item>
device 1
</ion-item>
</ion-list>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid>
<!-- Show if devices DO NOT exist -->
<ion-row>
<ion-col>
<button text-center ion-button round col-6 offset-3> Odśwież urządznia </button>
</ion-col>
</ion-row>
</ion-grid>
I wanted to do something like *ngIf!=null or *ngElse but these two do not work.
So my question is how do I do that?
You have to use in following way -
<div *ngIf="condition; else elseBlock">
Truthy condition
</div>
<ng-template #elseBlock>
False condition
</ng-template>
hope this will help you, let me know in case any issue?
I have a side project in Ionic 3. In this project I have view with array of users, this works perfectly. These users have a button with id, when we click we move to other view to show more data of this user. All backend is Lumen and tested with Postman, response is correct.
The problem that I have is that the second page doesn´t show any data, but I check in network tab and receive the json correctly. When I go back to first page and go again to the second page, data see in the view. ¿Why the first time that I go to the second page the data doesn´t appear? I think that is a strange error.
data2: any
verDetalles(id:any){
this.visitantes.verVisitante(id)
.then(data2 => {
this.data2 = Array(data2);
});
this.navCtrl.push(DatosPreVisitasPage, {
animate: true,
data:this.data2
});
}
//CALL TO ENDPOINT
verVisitante(id:any) {
return this.http.get('http://visitas.api.app:8000/visitantes/'+id)
.map(res => res.json())
.toPromise();
}
And this code in view
<ion-header >
<ion-navbar>
<ion-title text-center>
Datos Prevista
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="background">
<ion-grid >
<ion-card padding>
<ion-list *ngFor="let user of datos" >
<ion-item>
<ion-label floating>Nombre</ion-label>
<ion-input type="text" [(ngModel)]="user.nombre" name="nombre"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Apellido</ion-label>
<ion-input type="text" [(ngModel)]="user.apellidos" name="apellido"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Empresa</ion-label>
<ion-input type="text" [(ngModel)]="user.empresa" name="empresa"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>DNI</ion-label>
<ion-input type="text" [(ngModel)]="user.dni" name="dni"></ion-input>
</ion-item>
</ion-list>
</ion-card>
</ion-grid>
</ion-content>
Maybe is a error on the promise or something like that, but not sure, i'm new in ionic.
You should call the second page inside .then so that it is called only when data has aarrived:
data2: any
verDetalles(id:any) {
this.visitantes.verVisitante(id)
.then(data2 => {
this.data2 = Array(data2);
this.navCtrl.push(DatosPreVisitasPage, {
animate: true,
data:this.data2
});
});
}
I'm making an template for an app, and i need to show a select component when one of the previous radio buttons is set in a determined state. The logic is this:
The current code I have got is this:
<ion-row>
<ion-list radio-group [(ngModel)]="tipo">
<ion-item>
<ion-label>Gato</ion-label>
<ion-radio value="g" checked></ion-radio>
</ion-item>
<ion-item>
<ion-label>Perro</ion-label>
<ion-radio value="p"></ion-radio>
</ion-item>
</ion-list>
<div ng-if="tipo === 'g'">
<ion-list>
<ion-item>
<ion-label>Choose</ion-label>
<ion-select [(ngModel)]="raza1">
<ion-option value="angora">angora</ion-option>
<ion-option value="persa">persa </ion-option>
</ion-select>
</ion-item>
</ion-list>
</div>
<div ng-if="tipo === 'p'">
<ion-list>
<ion-item>
<ion-label>Choose</ion-label>
<ion-select [(ngModel)]="raza2">
<ion-option value="pastor aleman">Pastor Aleman</ion-option>
<ion-option value="schnauzer">schnauzer</ion-option>
</ion-select>
</ion-item>
</ion-list>
</div>
</ion-row>
So long I haven't reached the ng-if to work and I don't know why. If you could help me figure out why. Thanks
Most of the time, these kind of issues are related to javascript references. instead of
$scope.tipo, use
$scope.someNamespace = {
tipo: ''
};
then use someNamespace.tipo instead of tipo in html
I have a div that repeats using an *ngFor. So there are multiple div's on my page. Within each of these div's, there several more element's that also toggle. So we have collapsible fields within other collapsible fields. Each item allows the parent to collapse all children, but also the children to expand/collapse individually.
The problem is that when multiple item are generated using the *ngFor, the toggle function to expand/collapse the fields applies to all the items on the page. I want the toggle to work for only that specific item.
Here is a snippet of the HTML/AngularJS code:
<div padding>
<div *ngFor="let item of ItemsList">
<div>
<ion-grid>
<ion-row>
<ion-col>
{{item.information}}
</ion-col>
<ion-col>
{{item.information}}
</ion-col>
<ion-col>
{{item.information}}
</ion-col>
<ion-col>
{{item.information}}
</ion-col>
<ion-col>
<a *ngIf="!expandItem" (click)="toggleItem('down')">
<ion-icon class="fa fa-angle-double-down fa-2x"></ion-icon>
</a>
<a *ngIf="expandItem" (click)="toggleItem('up')">
<ion-icon class="fa fa-angle-double-up fa-2x"></ion-icon>
</a>
</ion-col>
</ion-row>
<div>
...
...
...
<ion-col>
<a *ngIf="!expandField1" (click)="toggleField1('down')">
<ion-icon class="fa fa-angle-double-down fa-2x"></ion-icon>
</a>
<a *ngIf="expandField1" (click)="toggleField1('up')">
<ion-icon class="fa fa-angle-double-up fa-2x"></ion-icon>
</a>
</ion-col>
<ion-grid *ngIf ="expandField1 || (expandItem && expandField1)">
<ion-row *ngFor="let subItem of item.subItem">
<ion-col>
{{subItem.name}}
</ion-col>
<ion-col>
{{subItem.name}}
</ion-col>
<ion-col>
{{subItem.name}}
</ion-col>
</ion-row>
</ion-grid>
</div>
</div>
Here is a snippet of the toggle functions
toggleItem(type: any) {
if (type == 'up') {
this.expandItem = false;
this.expandField1 = false;
} else {
this.expandItem = true;
this.expandField1 = true;
}
toggleField1(type: any) {
if (type == 'up') {
this.expandField1 = false;
} else {
this.expandField1 = true;
this.expandItem = true;
}
Any questions please ask.
you will have to use an array of expandItem and expandField1 to track opening and closing of each collapsible. For this you can use $index and then set array for it like expandItem[$index] = true for a particular collabsible on click.