I'm new in Ionic and I want to create list in which in each ion-item there will be checbox and when user checks it then select will appear in new line but still within ion-item. I've tried to use ion-item inside ion-item but then select wasn't showing. I've read that there is some issue with nested ion-items so I replaced first ion-item with ng-container but after that all layout looks terrible. What should I do?
<ion-list>
<ng-container *ngFor="let filter of filters">
<ion-label> {{filter.name}}</ion-label>
<ion-checkbox item-right [(ngModel)]="filter.checked" (ionChange)="onCheckboxChange($event, filter)"></ion-checkbox>
<ion-item>
<ion-select [(ngModel)]="option">
<ion-option *ngFor="let option of filter.data" [value]="option">{{option.name}}</ion-option>
</ion-select>
</ion-item>
</ng-container>
</ion-list>
I figured it out - in ion-list I put ion-card-content with ngFor as a wrapper for ion-items. Works and looks good!
<ion-list>
<ion-card-content *ngFor="let filter of filters" class="card-wrapper">
<ion-item class="checkbox-item">
<ion-label> {{filter.name}}</ion-label>
<ion-checkbox item-right [(ngModel)]="filter.checked"></ion-checkbox>
</ion-item>
<ion-item>
<ion-select [(ngModel)]="option">
<ion-option *ngFor="let option of filter.data" [value]="option">{{option.name}}</ion-option>
</ion-select>
</ion-item>
</ion-card-content>
</ion-list>
Related
I am developing an app using Ionic 3. I have an ion-item-sliding wrapped within an ion-list. I need to show the options when the list item is swiped. I got the color working but the text is not displaying at all. I don't have any css applied to the button at all.
<ion-list text-wrap>
<ion-list-header>
...
</ion-list-header>
<ion-item *ngIf="classes?.length === 0">No Data</ion-item>
<ion-item-group *ngFor="let classObj of classes">
<ion-item-divider>...</ion-item-divider>
<ion-item-sliding *ngFor="let class of classObj?.classes">
<ion-item *ngFor="let class of classObj?.classes">
<ion-grid>
...
</ion-grid>
</ion-item>
<ion-item-options side="right">
<button ion-button color="secondary">
Change
</button>
</ion-item-options>
</ion-item-sliding>
</ion-item-group>
</ion-list>
I have no idea what went wrong. This happened to both Android and iOS
Its ok I have found the solution. I mistakenly *ngFor both ion-item-sliding and ion-item hence the slider breaks. I removed *ngFor in the ion-item and everything is works fine now
I think you have to provide small cancel button next to your ion-select, which appears only when the user has already selected something:
<ion-label>Options</ion-label>
<ion-select [(ngModel)]="option">
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
<div *ngIf="option=='m' || option=='f'">
<ion-label> {{option}} </ion-label>
<ion-button (click)='removeSelection()'>
<ion-icon name='close'></ion-icon>
</ion-button>
When on IOS, ion-select doesn’t trigger choices when tapping on it. It does so when tapping on its boundaries / borders.
An example of faulty code :
<ion-list>
<ion-item no-padding>
<ion-label position="floating">{{'GENDER' | translate}}</ion-label>
<ion-select formControlName="gender">
<ion-select-option value="male">{{"MALE" | translate}}</ion-select-option>
<ion-select-option value="female">{{"FEMALE" | translate}}</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
Am I missing something ?
The faulty part is the position="floating" on the label element. Removing it, or putting something else like stacked fixes the issue.
<ion-list>
<ion-item no-padding>
<ion-label>{{'GENDER'}}</ion-label>
<ion-select formControlName="gender">
<ion-select-option value="male">{{"MALE" }}</ion-select-option>
<ion-select-option value="female">{{"FEMALE"}}</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
Add the tappable attribute to <ion-item>:
<ion-list>
<ion-item tappable no-padding>
<ion-label position="floating">{{'GENDER' | translate}}</ion-label>
<ion-select formControlName="gender">
<ion-select-option value="male">{{"MALE" | translate}}</ion-select-option>
<ion-select-option value="female">{{"FEMALE" | translate}}</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
I am using ion-select in my app. But when i run it on the device, ion-select shows three dots in spite of having sufficient space.
My Code is
<ion-row *ngIf="item.type=='variable'">
<ion-col>
<div class="addtocart">Add</div>
</ion-col>
<ion-col>
<ion-item class="item">
<ion-select placeholder="Size" interface="popover">
<ion-option *ngFor="let items of item.attributes[0].options">
{{items}}
</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
I have already tried using max-width:100% . ion-select works perfectly when i use it in new row. But i want to display it with other item in the same row.
Please help, i have been searching the net for the last 5-6 hours but no help.
Use text-wrap in ion-item or ion-select,it will wrap your select text.
<ion-row *ngIf="item.type=='variable'">
<ion-col>
<div class="addtocart">Add</div>
</ion-col>
<ion-col>
<ion-item class="item" text-wrap>
<ion-select placeholder="Size" interface="popover" text-wrap>
<ion-option *ngFor="let items of item.attributes[0].options">
{{items}}
</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
Then if it is not working then give min-width to ion-select in css
How do I solve this?
This is the code for my checkbox.
<ion-list *ngIf="items">
<ion-item *ngFor="let driver of items">
<ion-label>{{driver.name}}</ion-label>
<ion-checkbox [(ngModel)]="driverSelect"
[checked]="items.includes(driver)" item-right></ion-checkbox>
</ion-item>
</ion-list>
https://i.stack.imgur.com/1nNUo.jpg
Try below code
<ion-list *ngIf="items">
<ion-item *ngFor="let driver of items;let i = index ">
<ion-label>{{driver.name}}</ion-label>
<ion-checkbox [(ngModel)]="items[i]"
[checked]="items.includes(driver)" item-right></ion-checkbox>
</ion-item>
</ion-list>
You have to make model name different with each checkbox
ionic-angular version is 2.0.0-rc.2
if I remove *ngFor, using a static list instead, it works fine. The following is the code snippet.
<ion-list>
<ion-item-sliding *ngFor="let item of items">
<ion-item>
<h2>{{item.subject}}</h2>
</ion-item>
<ion-item-options side="right">
<button ion-button color="primary">
<ion-icon name="mail"></ion-icon> Email
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
I notice problem with ion-item-sliding, when slide, it not keep slided item, so not allows to click ion-item-options button
The above code is tested and finally has run successfully with dynamic data from outside.
The problem is that when item is calling just add the little code. async pipe after the loop.
The Final code will be....
<ion-list>
<ion-item-sliding *ngFor="let item of items | async">
<ion-item>
<h2>{{item.subject}}</h2>
</ion-item>
<ion-item-options side="right">
<button ion-button color="primary">
<ion-icon name="mail"></ion-icon> Email
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
Hopefully, Above code will work fine.