I have an "ion-list" in an "ion-item" from a parent list in a view. But, the child list doesn't display any data. Here's the code i use to diplay the lists :
<ion-list>
<ion-list-header>
{{ 'forms.settings.areas' | translate }}
</ion-list-header>
<ion-item *ngFor="let area of areas">
<ion-list>
<ion-item class="item-thumbnail-left">
<ion-avatar>
<img src="assets/images/areas/{{ area.logo }}" title="{{ area.translations.fr }}" />
</ion-avatar>
<h2>{{ area.translations.fr }}</h2>
</ion-item>
<ion-item>
<ion-label floating>{{ 'forms.settings.area.followDLC' | translate }}</ion-label>
<ion-toggle [(ngModel)]="area.followDLC" [checked]="area.id == 1" color="primary"></ion-toggle>
</ion-item>
<ion-item *ngIf="area.followDLC">
<ion-label floating>{{ 'forms.settings.area.alertBefore' | translate }}</ion-label>
<ion-range min="0" max="7" step="1" snaps="true" color="primary" pin="true" [(ngModel)]="area.alertBefore">
<ion-label range-left>0</ion-label>
<ion-label range-right>7</ion-label>
</ion-range>
</ion-item>
</ion-list>
</ion-item>
</ion-list>
The ion-list-header is correctly rendered, but the other items are blank.
The "areas" structure on which i loop is an array of objects and seems correct :
[{"id":1,"type":"area","translations":{"fr":"Frigo","en":"Fridge"},"stats":{"totalProducts":5,"totalQuantity":5,"stockPrice":null,"alertOnPeremption":0,"alertOnStockLevel":0},"logo":"frigo.png","_id":"1","_rev":"50-55c270db9c0ac62ae8e378e1773a390c","followDLC":true,"alertBefore":7},
{"id":2,"type":"area","translations":{"fr":"Congélateur","en":"Freezer"},"stats":{"totalProducts":5,"totalQuantity":1,"stockPrice":4.99,"alertOnPeremption":0,"alertOnStockLevel":1},"logo":"congelateur.png","_id":"2","_rev":"19-307ca9a1882e4c1781cad5b062cdd920","followDLC":false,"alertBefore":0},
{"id":3,"type":"area","translations":{"fr":"Garde-Manger","en":"Pantry"},"stats":{"totalProducts":11,"totalQuantity":5,"stockPrice":25.48,"alertOnPeremption":0,"alertOnStockLevel":0},"logo":"garde-manger.png","_id":"3","_rev":"118-2746786125e84ae31dd9bfaaecd73118","followDLC":false,"alertBefore":0}]
The screenshot of the result follows :
Someone can help ?
Okay...
Don't know why the first code doesn't render the way i want... But, i change the view this way :
<ion-item-group *ngFor="let area of areas">
<ion-item-divider color="light">
<ion-avatar>
<img src="assets/images/areas/{{ area.logo }}" title="{{ area.translations.fr }}" />
</ion-avatar>
<h2>{{ area.translations.fr }}</h2>
</ion-item-divider>
<ion-item>
<ion-label item-left stacked>{{ 'forms.settings.area.followDLC' | translate }}</ion-label>
<ion-toggle item-right [(ngModel)]="area.followDLC" [checked]="area.followDLC" color="primary"></ion-toggle>
</ion-item>
<ion-item>
<ion-label item-left stacked>{{ 'forms.settings.area.alertBefore' | translate }}</ion-label>
<ion-range item-right min="0" max="7" step="1" snaps="true" color="primary" pin="true" [(ngModel)]="area.alertBefore">
<ion-label range-left>0</ion-label>
<ion-label range-right>7</ion-label>
</ion-range>
</ion-item>
</ion-item-group>
Then, labels and input renders the way i want...
Thx all
Related
I'm using 'ngFor' to repeat ion-items but i'm not getting any space b/w each item.
My code :
<ion-list >
<button ion-item class="my-item" *ngFor="let r of recentUpdatesData" (click)="goToReleatedPage(r)">
<ion-thumbnail item-left>
<img src="assets/{{r.imagePath}}" alt="your image">
</ion-thumbnail>
<h2><strong>{{r.title}}</strong></h2>
<h3>{{r.type}}</h3>
<p>{{r.description | slice : 0:500}}</p>
</button>
<hr class="style14" />
</ion-list>
Final result i need:
I suggest you use just ion-item instead of button. It seems to be adding additional padding to the list item.
<ion-list >
<ion-item class="my-item" *ngFor="let r of recentUpdatesData" (tap)="goToReleatedPage(r)">
<ion-thumbnail item-left>
<img src="assets/{{r.imagePath}}" alt="your image">
</ion-thumbnail>
<h2><strong>{{r.title}}</strong></h2>
<h3>{{r.type}}</h3>
<p>{{r.description | slice : 0:500}}</p>
</ion-item>
<hr class="style14" />
</ion-list>
Side note: use tap instead of click in mobile devices.
Or you should redesign using ion-grid instead of ion-list.
<ion-grid>
<ion-row class="my-item" *ngFor="let r of recentUpdatesData" (tap)="goToReleatedPage(r)">
<ion-col col-6>
<ion-thumbnail item-left>
<img src="assets/{{r.imagePath}}" alt="your image">
</ion-thumbnail>
</ion-col>
<ion-col>
<ion-row>
<h2><strong>{{r.title}}</strong></h2>
</ion-row>
<ion-row>
<h3>{{r.type}}</h3>
</ion-row>
<ion-row>
<p>{{r.description | slice : 0:500}}</p>
</ion-row>
</ion-col>
</ion-row>
<hr class="style14" />
</ion-grid>
I want to disable buttons when fields are empty.
Template:
<ion-content padding text-center class="product">
<ion-item>
<ion-input placeholder="Product" type="text" [(ngModel)]="product.productName"></ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Price" type="number" [(ngModel)]="product.price"></ion-input>
</ion-item>
<button ion-button block (click)="checkPrice()" [disabled]="!(product.price && product.productName) ? true : null">Сравнить цену</button>
<button ion-button block (click)="addToReceipt()" [disabled]="!(product.price && product.productName) ? true : null">Добавить в чек</button>
When I run this on browser - data binding works fine.
when I run this on device - data binding does not work:
I think you can do this using <form> and required in <ion-input> like:
<ion-content padding text-center class="product">
<form #demoForm="ngForm">
<ion-item>
<ion-input placeholder="Product" type="text" [(ngModel)]="product.productName" required></ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Price" type="number" [(ngModel)]="product.price" required></ion-input>
</ion-item>
</form>
<button ion-button block (click)="checkPrice()" [disabled]="!demoForm.form.valid">Сравнить цену</button>
<button ion-button block (click)="addToReceipt()" [disabled]="!demoForm.form.valid">Добавить в чек</button>
Just an example. You need to check other parts/conditions in your code if you have any.
I want to display label and input on left side sequentially and button/icon on right side.
i have tried with using grid as
<ion-grid>
<ion-row>
<ion-col width-10>
<ion-icon name="phone-portrait"></ion-icon>
</ion-col>
<ion-col width-70>
<ion-input type="text" placeholder="Mobile no"></ion-input>
</ion-col>
<ion-col width-10>
<ion-icon name="contacts" (click)="pickContactNo()"></ion-icon>
</ion-col>
</ion-row>
</ion-grid>
It display's it inline but the input box slightly goes below.
also tried with item-left and item-right properties. but cant able to do.
Try this:
<ion-item>
<ion-icon item-left name="phone-portrait"></ion-icon>
<ion-input type="text" placeholder="Mobile no"></ion-input>
<ion-icon item-right name="contacts" (click)="pickContactNo()"></ion-icon>
</ion-item>
You will probably have to override some of the css in the elements of ion-grid otherwise.
UPDATE From ionic#3.4.0 :
Thanks to #keldar for the comment. According to the docs,directional properties item-left and item--right are deprecated and you would need to use item-start and item-end which would allow to support both Right to Left and Left to Right.
<ion-item>
<ion-icon item-start name="phone-portrait"></ion-icon>
<ion-input type="text" placeholder="Mobile no"></ion-input>
<ion-icon item-end name="contacts" (click)="pickContactNo()"></ion-icon>
</ion-item>
ion-row has several attributes (see Row). The one that looks suitable for you is align-items-center.
So, you can try this:
<ion-grid>
<ion-row align-items-center>
...
if you add new col, it mean that will be another column and you don't have unspecified the dimensions of these
When you add
you can insert one ion-item to insert everything on the same line without static sizes.
<ion-item>
<ion-icon item-start name="phone-portrait"></ion-icon>
<ion-input type="text" placeholder="Mobile no"></ion-input>
<ion-icon item-end name="contacts" (click)="pickContactNo()"></ion-icon>
</ion-item>
I am developing a Mobile App using the Ionic2-Framework along with Angular2.
In a section of my app, I have several <ion-slides> with <ion-item><ion-input ...></ion-input></ion-item> on the slides.
When changing the slide, the keyboard opens up without actively touching one of the input-fields. So far, I could only test it on iOS, but I found out that it only happens for type="tel"-inputs
Is there a way to prevent the app from doing this, as I would like the users to choose the time to input by themselves.
The code of my page looks like that:
(I excluded some parts for readability)
<ion-header>
<ion-navbar>
<button ion-button icon-only menuToggle [hidden]="showBackButton">
<ion-icon color="primary" name="menu"></ion-icon>
</button>
<button color="light" ion-button icon-only [hidden]="!showBackButton" (click)="goToPreviousSlide()">
<ion-icon color="primary" name="arrow-back"></ion-icon>
</button>
<ion-title>Title</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-slides (ionSlideDidChange)="updateShowBackButton()">
<!-- Some more slides... -->
<ion-slide style="background-color: white" padding>
<h2 class="slide-title">Hello {{person.name}}!</h2>
<p>Now I need this and that information:/p>
<ion-item>
<ion-label>Day</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.day"></ion-input>
</ion-item>
<ion-item>
<ion-label>Month</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.month"></ion-input>
</ion-item>
<ion-item>
<ion-label>Year</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.year"></ion-input>
</ion-item>
<ion-item-divider></ion-item-divider>
<ion-item>
<ion-label>Height (cm)</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.height"></ion-input>
</ion-item>
<ion-item>
<ion-label>Weight: (kg)</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.weight"></ion-input>
</ion-item>
<button ion-button block (click)="goToNextSlide()">Next</button>
</ion-slide>
<!-- Some more slides... -->
</ion-slides>
</ion-content>
If you need futher information, please let me know! I am appreciating any hints! :)
Can not be set to checked, by using below codes, anyone can help me?
1
<ion-radio checked="true" value="go"></ion-radio>
2
<ion-list radio-group [(ngModel)]="status">
<ion-list-header>Status</ion-list-header>
<ion-radio (click)="changeStatus('0')" value="0">
Status 0
</ion-radio>
<ion-radio (click)="changeStatus('1')" value="1">
Status 1
</ion-radio>
<ion-radio (click)="changeStatus('2')" value="2">
Status 2
</ion-radio>
</ion-list>
Try this
<ion-list radio-group [(ngModel)]="status">
<ion-list-header>Status</ion-list-header>
<ion-item>
<ion-label>Status 0</ion-label>
<ion-radio (click)="changeStatus('0')" value="0">
</ion-radio>
</ion-item>
<ion-item>
<ion-label>Status 1</ion-label>
<ion-radio (click)="changeStatus('1')" value="1">
</ion-radio>
</ion-item>
<ion-item>
<ion-label>Status 2</ion-label>
<ion-radio (click)="changeStatus('2')" value="2">
</ion-radio>
</ion-item>
</ion-list>
Hope this helps you. Thanks
Update:
In your address-list.html
<div class="address-list">
<ion-list radio-group [(ngModel)]="recipientId">
<!-- <ion-list-header> 请选择地址： </ion-list-header> -->
<ion-item *ngFor="#item of addresses">
<ion-label>
<h2 class="text-big text-color-light-grey">{{item.name}}，{{item.phone}}</h2>
<p class="text-thin text-color-light-grey">{{item.provice}} {{item.city}}</p>
<p class="text-thin text-color-light-grey descr">{{recipientId}} == {{item.id}} - {{item.street}} {{item.address}}</p>
</ion-label>
<ion-radio (click)="selectAddress(item.id)" value="item.id"></ion-radio>
</ion-item>
</ion-list>
</div>
And in address-list.ts:
selectAddress(itemId) {
this.recipientId = itemId;
}