I am using the following code with ionic2
<ion-list>
<ion-item>
<ion-label>Sausage</ion-label>
<ion-checkbox [(ngModel)]="sausage"></ion-checkbox>
</ion-item>
</ion-list>
But checkbox not getting checked for only IOS platform. Please help me.
Related
Hi I have a select box in ionic 2 as.
//home.html
<ion-item>
<ion-label>Select City</ion-label>
<ion-select [(ngModel)]="city" (ionChange) ="getDoors()">
<ion-option *ngFor="let city of cities" [value]="city.id">
{{city.name}}</ion-option>
</ion-select>
</ion-item>
//home.ts
getDoors(){
console.log(this.cities);
}
But when I am changing option it throw an error, Error trying to diff '1'
can anyone let me know the issue here
Thanks advance
There are 2 methods through which you can get the value of the selected Item.
Method 1
//home.html
<ion-item>
<ion-label>Select City</ion-label>
<ion-select [(ngModel)]="city" (ionChange) ="getDoors($event)">
<ion-option *ngFor="let city of cities" [value]="city.id">
{{city.name}}</ion-option>
</ion-select>
</ion-item>
//home.ts
getDoors($event){
console.log($event);
}
Method 2
By using ngModel
//home.html
<ion-item>
<ion-label>Select City</ion-label>
<ion-select [(ngModel)]="selectedcity" (ionChange) ="getDoors($event)">
<ion-option *ngFor="let city of cities" [value]="city.id">
{{city.name}}</ion-option>
</ion-select>
</ion-item>
//home.ts
selectedcity: city
getSelectedCity(){
return this.selectedcity;
}
Perhaps it's because you named your ngModel city and your *ngFor uses city as well. Might cause a conflict. I would change your ngModel to
[(ngModel)]="selectedCity"
I have a form in my Ionic 2 project that has 2 ion-select dropdowns. When the user selects an option in the 1st dropdown it generates the options of the 2nd dropdown. This works fine. My question is, if the user changes their selection for the 1st dropdown the selected 2nd option does not clear out. How do I get it to clear so the user is not confused about the options for the new select?
<ion-item>
<ion-label>
<img height="100" src="assets/img/customer.png" alt="Customer"/>
</ion-label>
<ion-select [(ngModel)]="customer" name="customer" (ionChange)="addBuildings(customer);" placeholder="Customer">
<ion-option *ngFor="let customer of customers" value="{{customer.name}}">{{customer.name}}</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>
<img height="100" src="assets/img/building.png" alt="Building"/>
</ion-label>
<ion-select [(ngModel)]="building" name="building" placeholder="Building">
<ion-option *ngFor="let building of buildings" value="{{building.name}}">{{building.name}}</ion-option>
</ion-select>
</ion-item>
I solved this by using the ngModel and setting it to null in the .ts at the beginning of the .addBuildings() function.
My ionic side menu is working in android mobile but in ios i am not getting.
here is the code for .html
<button ion-button menuToggle icon-only class="menuButton">
<ion-icon name="menu"></ion-icon>
</button>
<ion-menu [content]="mycontent">
<ion-content>
<ion-list>
<p>some menu content, could be list items</p>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #mycontent ></ion-nav>
i dont understand where is my issue is if you need anything please let me know
my side menu is working in android and browser except ios
Try adding type="overlay" to the sidemenu:
<ion-menu [content]="mycontent" type="overlay">
use click function instead of menuToggle
<button ion-button icon-only start (click)="openSideMenu()">
<ion-icon name="md-menu"></ion-icon>
</button>
open menu using
openSideMenu() {
this.menuCtrl.enable(true)
this.menuCtrl.toggle();
}
disable menu before you push to new page
this.menuCtrl.enable(false)
In the following contacts list in iOS 10 device, while doing infinite scrolling angular2+Meteor+Ionic2 app, many times the click event gets fired and the contact detail page gets displayed.
<ion-content class="contacts-page-content">
<ion-list>
<button ion-item *ngFor="let contact of contacts | async" (click)="showContactDetails(contact)" text-wrap class="contacts">
<ion-avatar item-left>
<img[src]="contact.picture">
</ion-avatar>
<h2 class="contact-name">{{contact.firstName}} {{contact.lastName}}</h2>
<h4 ion-text color="grayText">{{contact.jobTitle}}</h4>
<h3 class="contact-supplier" *ngIf="contact.supplierName">{{contact.supplierName}}</h3>
</button>
</ion-list>
<ion-infinite-scroll (ionInfinite)="pullMoreContacts($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more contacts...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
Is there anyway the click while scrolling can be avoided? Any help is greatly appreciated.
Thanks.
Check here for ionic 2 gestures.
Try
(tap)=showContactDetails(contact)
instead of click.
I'm trying to build an ion-list radio-group with *ngFor from an array. I have an array of games (id, name) and I want only a list with them where the user can choose only one, but local variables seems to be broken (the first should be checked but this does not work too). Here is my code:
<ion-header>
<ion-navbar>
<ion-title>
New match
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list radio-group>
<ion-list-header>
Game
</ion-list-header>
<ion-item *ngFor="let game of games, let i = index">
<ion-label>{{ game.name }}</ion-label>
<ion-radio checked="i == 0" value="game.id"></ion-radio>
</ion-item>
</ion-list>
</ion-content>
What am I doing wrong? Anybody have an idea? Thanks.
You have to use double brackets {{}} around the checked="i==0" and the value="game.id" Like so:
<ion-radio checked="{{i == 0}}" value="{{game.id}}"></ion-radio>
Otherwise, the checked and value attributes evaluate the content as a strings, not expressions.