I use ionic to create an android mobile application. But I have a problem with the select.
On the site of ionic, it can be seen that in the documentation, you can use <ion-select>, but strangely, when I try to use it nothing happens. The result is not the one expected, because it has no effect. <ion-select> is not triggering..
So I am forced to use this for now:
<select ng-model="form.city">
<option value="">Select</option>
<option ng-repeat="c in city" ng-value="c.id">{{c.name}}</option>
</select>
While I would like to have the same result as on the official website, with <ion-select>
Try this
<ion-select [(ngModel)]="form.city">
<ion-option *ngFor="c in city" value="{{c.id}}">
{{c.name}}
</ion-option>
</ion-select>
Try This its working fine for me
<ion-list>
<ion-item>
<ion-label>Users List</ion-label>
<ion-select [(ngModel)]="myUser" placeholder="Select your User">
<ion-option *ngFor="let user of users; let i = index" ng-value="user.id" >
{{user.name}}
</ion-option>
</ion-select>
</ion-item>
</ion-list>
Related
I am trying to add a country code where when you press on the selector under the "country" label, in the second picture, you get a list like the first picture with the country names and the flags next to it then you would be redirected to the second picture with the selector displaying the selected country flag and the country code. I tried to use
Html
<ion-row>
<ion-col>
<ion-item (click)="openSelect()">
<div class="ion-text-left">
<ion-label position="stacked">البلد</ion-label>
<ion-input [(ngModel)]="selectedCode"></ion-input>
</div>
</ion-item>
<ion-item style="display: none">
<div class="ion-text-left">
<ion-label >البلد</ion-label>
<ion-select #select1
[(ngModel)]="selectedCode">
<ion-select-option *ngFor="let c of countries" value="{{c.flag}}{{c.code}}">{{c.flag}}{{c.name}}</ion-select-option>
</ion-select>
</div>
</ion-item>
</ion-col>
.TS
#ViewChildren('select1') select1: Select;
countries: any = [
{
code: '+91',
flag: [./in.png],
name: 'India'
},
{
code: '+1',
flag: [./US.png]
name: 'America'
}
];
openSelect() {
setTimeout(() => {
this.select1.open();
}, 150);
}
for selecting the country code value you can use [value] property of ion select option
and for displaying the selected value you can use [selectedText] property of ion select in ionic 4/5
you can find official documentation here
<ion-select formControlName="country" [selectedText]="signupform.controls.country.value" name="country" #countryselect id="countryselect">
<ion-select-option *ngFor="let country of countries" [value]="country.id">
{{country.name}}
</ion-select-option>
</ion-select>
After the value is selected the value shows always empty. Working code in previous version as below. And latest version is also added below.
Am i doing wrong some where ?
IONIC previous version
<div>
<ion-select>
<ion-option *ngFor="let city of citys.options" [value]="city"> {{city}}
</ion-option>
</ion-select>
</div>
IONIC 4
<div>
<ion-select ngDefaultControl>
<ion-select-option *ngFor="let city of citys.options" [value]="city"> {{city}}
</ion-select-option>
</ion-select>
</div>
Working code if using plain html controls
<div>
<select ngDefaultControl>
<option *ngFor="let city of citys.options" [value]="city"> {{city}}
</option>
</select>
</div>
Your code is working fine when I test it - here is what's working for me:
<ion-item>
<ion-label>Cities</ion-label>
<ion-select placeholder="Select One" [(ngModel)]="selectedCity">
<ion-select-option *ngFor="let city of citys.options">{{city}}</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
You selected: {{selectedCity}}
</ion-item>
In ts file:
citys = {
options: ["red", "blue", "yellow"]
}
I would suspect there is something somewhere else that is causing the component to break. Perhaps your citys object doesn't contain the data you expect.
This importing IonicModule in my components.module.ts made it to work
import { IonicModule } from '#ionic/angular';
I have two ion select and I would like to capture the value of each select from the TS when I click a button. Please help
part of code:
<ion-item>
<ion-label class="lbReward" color="dark" >Reward Type: </ion-label>
<ion-select (ionChange) = "onChange()" [ngModel] = "selectedRewardType">
<ion-option value="priceDiscount">Total Price Discount</ion-option>
<ion-option value="categoryDiscount">Category Price Discount</ion-option>
<ion-option value="freeGiftwithPrice">Sufficient Price Free Gift</ion-option>
<ion-option value="freeGiftwithMeal">Meal with Free Gift</ion-option>
</ion-select>
</ion-item>
I'm facing a problem with ionic select options. In a settings popup, I defined a few options and one is selected="true" like the following code:
<ion-select (ionChange)="changeStartpoints($event)" interface="popover">
<ion-option value="1" selected="true">1</ion-option>
<ion-option value="2">2</ion-option>
</ion-select>
This works perfectly fine, but now I don't want the first option to be selected by default every time I open the settings popup. If the second option was selected the last time, I want the second option to be pre-selected this time opening the popup.
I tried this:
<ion-select (ionChange)="changeStartpoints($event)" interface="popover">
<ion-option value="1" selected="isSelected_Startpoints(170)">1</ion-option>
<ion-option value="2" selected="isSelected_Startpoints(501)">2</ion-option>
</ion-select>
where isSelected_Startpoints() is:
isSelected_Startpoints (value: number) {
console.log(this.startpoints);
if (this.startpoints == value) {
return true;
} else {
return false;
}
}
and changeStartpoints() is:
changeStartpoints (change) {
change = parseInt(change);
this.startpoints = change;
}
but it did not work. Not even the console.log appeared.
So my question is, Is it possible to link functions to the "selected" attribute? And how can I solve my problem?
Thanks for any help
Give something like this a try:
<ion-select (ionChange)="changeStartpoints($event)" interface="popover">
<ion-option value="1" selected="{{startpoints === 170}}">1</ion-option>
<ion-option value="2" selected="{{startpoints === 501}}">2</ion-option>
</ion-select>
My guess is your version may have worked if you changed your selected to [selected] too
Im using ionic 3 for my mobile application. I have an issue with my item list, my issue is when i add a new item it does not show up at the top of the list, it always appears at the bottom , how to do that correctly?
Thanks
example
add Item -
first -A
second-B
its display
A
B
I want to know how can display this type
B
A
item list
<ion-list class="ion-addexe">
<ion-item *ngFor="let bill of Details">
<ion-label>
<p class="ion-lbl" style="position: relative;top:-0.2rem;">{{bill.billdescription}}</p>
</ion-label>
<ion-label>
<p class="ion-lbl" text-right style="position: relative;top:-0.2rem;">$ {{bill.billtotal}}</p>
</ion-label>
</ion-item>
</ion-list>
add item
<div>
<ion-item >
<ion-label id="ion-lbls">Select you want</ion-label>
<ion-select [(ngModel)]="addnewBill_category" okText="Add" cancelText="Close">
<ion-option *ngFor="let bill of Category" value="{{bill.billCategoryID}}">{{bill.CategoryName}}</ion-option>
</ion-select>
</ion-item>
<ion-item >
<ion-label id="ion-lbls">Details</ion-label>
<ion-input type="text" value="" [(ngModel)] = "addnewBill_description" placeholder="Description" text-right></ion-input>
</ion-item>
<ion-item >
<ion-label id="ion-lbls">Date</ion-label>
<ion-datetime displayFormat="MMM DD YYYY" [(ngModel)]="event.addnewbill_Date" placeholder="MMM/DD/YYYY"></ion-datetime>
</ion-item>
<ion-item>
<ion-label id="ion-lbls">Total ($)</ion-label>
<ion-input type="number" [(ngModel)]="addnewBill_amount" value="" placeholder="$0.0" text-right></ion-input>
</ion-item>
</div>
</ion-list>
First of all that is the correct way in which a ngFor works it displays the first element first and the next items at the bottom, because whenever you insert new items inside an array it follows the top to bottom approach. So basically you want to display your array items in reverse order that should be your question
The most simple and easy solution to this is by just using reverse() on your *ngfor. In your case it would be something like this:
<ion-item *ngFor="let bill of Details.reverse()">
...
<ion-item>
or one more solution is using a custom angular pipe which you could apply on the *ngFor and sort your array in reverse order.
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'reverse'
})
export class ReversePipe implements PipeTransform {
transform(value) {
if (!value) return;
return value.reverse();
}
}
and then in your html you can use that pipe like this:
<ion-item *ngFor="let bill of Details | reverse">
...
<ion-item>