I am using ion-select to display list of item in dropdown in ionic 2. I am wondering if it is possible to add search textbox on the top of select.
<ion-item>
<ion-label>Gaming</ion-label>
<!-- can I put text box here?? -->
<ion-select [(ngModel)]="gaming" multiple="true">
<ion-option value="nes">NES</ion-option>
<ion-option value="n64">Nintendo64</ion-option>
<ion-option value="ps">PlayStation</ion-option>
<ion-option value="genesis">Sega Genesis</ion-option>
<ion-option value="saturn">Sega Saturn</ion-option>
<ion-option value="snes">SNES</ion-option>
</ion-select>
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 am using ionic 2 and I would like to get a result like this:
For now, I have a simple ion-list :
<ion-list radio-group formControlName="type">
<ion-col col-4 >
<ion-item>
<ion-label>Breakfast</ion-label>
<ion-radio value="breakfast" ></ion-radio>
</ion-item>
</ion-col>
<ion-col col-4 >
<ion-item>
<ion-label>Diner</ion-label>
<ion-radio value="diner" checked="true">
</ion-radio>
</ion-item>
</ion-col>
<ion-col col-4 >
<ion-item>
<ion-label>Lunch</ion-label>
<ion-radio value="lunch" checked="true">
</ion-radio>
</ion-item> </ion-col>
my result :
thanks
You need to implement Ionic Segment to get the expected result.
have a look Ionic-Segment
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.
I want the <ion-select> of a ionic form to look like a <button>.
Here is my html template:
<form (ngSubmit)="doSubmit()" [formGroup] = "myForm" >
<ion-item>
<!-- <button ion-button block> -->
<ion-select type="text" formControlName="choose" placeholder = "choose">
<ion-option value=1>option 1</ion-option>
<ion-option value=2>option 2</ion-option>
</ion-select>
<!-- </button> -->
</ion-item>
// ... other input fields + doSubmit() function ...
</form>
As it is, it works and I can manage the selection. But I want it to look like a button. So I added some tag <button ion-button block></button> around the <select> tags. If the <button> tags are uncommented, it does not work: It does not show as a button and the select functionnaly is dead. Also I naively expected it would execute as I had wished it, but it doesn't.
Has anyone an idea?
I'm trying to align a combo and an input text with ionic2.
When i use ion-item inside a ion-grid, it always occupies 50% of the page, without respecting the configured size.
Any idea how to do this?
<ion-row>
<ion-col width-30>
<ion-item>
<ion-select [(ngModel)]="type">
<ion-option value="work">work</ion-option>
<ion-option value="home">home</ion-option>
<ion-option value="cel">cel</ion-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col width-70>
<ion-item>
<ion-input type="text" [(ngModel)]="phone" clearInput placeholder="Phone"></ion-input>
</ion-item>
</ion-col>
</ion-row>
https://plnkr.co/edit/BwdCrwECIXV6krWZBCzl?p=preview
Just like you can see in Ionic2 docs these are the values you can use to set the width of the columns:
Explicit Column Percentage Attributes
width-10 10%
width-20 20%
width-25 25%
width-33 33.3333%
width-50 50%
width-67 66.6666%
width-75 75%
width-80 80%
width-90 90%
That's why if you try to use width-30 or width-70, nothing will change. Instead, you can align those two fields by using width-33 and width-67 like you can see in this working plunker.
There, if you inspect the ion-col element in the browser, you'll see this style rule being applied:
ion-col[width-33], ion-col[width-34] {
-webkit-box-flex: 0;
-webkit-flex: 0 0 33.3333%;
-ms-flex: 0 0 33.3333%;
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
And
ion-col[width-66], ion-col[width-67] {
-webkit-box-flex: 0;
-webkit-flex: 0 0 66.6666%;
-ms-flex: 0 0 66.6666%;
flex: 0 0 66.6666%;
max-width: 66.6666%;
}
Which was not happening with width-30 and width-70.
Try giving ion-item as the parent tag for ion-row
<ion-item>
<ion-row>
<ion-col width-30>
<ion-select [(ngModel)]="type">
<ion-option value="work">work</ion-option>
<ion-option value="home">home</ion-option>
<ion-option value="cel">cel</ion-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col width-70>
<ion-item>
<ion-input type="text" [(ngModel)]="phone" clearInput placeholder="Phone"></ion-input>
</ion-col>
</ion-row>
</ion-item>