I want to make the first item in the list to be always checked but checked="true" does not seem to be working
<ion-item>
<ion-label class="label">Change City</ion-label>
<ion-select checked="true" [(ngModel)]="cityName"(ionChange)="getCity()">
<ion-option class="option" *ngFor="let city of City" value='{{city.cname}}' >{{city.cname}}</ion-option>
</ion-select>
</ion-item>
you should remove checked="true" from ion-select and try to checked from the .ts file like this:-
export class MyClass {
constructor() {
this.cityName= '**your city name**';
}
}
Note:- checked="true" not working because you used this in
ion-select so, inside the ion-select all option are occur.So it can't
get which option you want to check from ion-select.
Related
I would like to make my ion-select a required input of the form, but it does not work like this. I do not use Angular or React.
<ion-select id= "id1" required>
//...
</ion-select>
Add a template reference to your ion-select named id1
<ion-select id= "id1" #id1 >
//...
</ion-select>
Access this ref to Typscript class:
#ViewChild("id1") id1!: IonSelect;
Return to html page to check if it has a value to validate your submit button.
<ion-button [disabled]='!!id1 && !!id1.value'>Submit</ion-button>
I am using IONIC3. And I have one ion-select with multiple. Now whatever I am selecting
that is showing in comma separated value. But I want to display in this format like if 2 are selected then it should show
'2 of 6 Selected'
<ion-item>
<ion-label>Toppings</ion-label>
<ion-select [(ngModel)]="toppings" multiple="true">
<ion-option>Bacon</ion-option>
<ion-option>Black Olives</ion-option>
<ion-option>Extra Cheese</ion-option>
<ion-option>Mushrooms</ion-option>
<ion-option>Pepperoni</ion-option>
<ion-option>Sausage</ion-option>
</ion-select>
</ion-item>
Can anyone please help me how to do this.
Here is solution :
component.html
<ion-item>
<ion-label>Toppings</ion-label>
<ion-select [(ngModel)]="toppings" multiple="true" [selectedText]="textToDisplay" (ionChange)="onSelectChange($event)">
<ion-option *ngFor="let option of options">{{option}}</ion-option>
</ion-select>
</ion-item>
component.ts
export class HomePage {
toppings:any;
selectedOptions:any=[];
options=[
"Bacon",
"Black Olives",
"Extra Cheese",
"Mushrooms",
"Pepperoni",
"Sausage"
];
textToDisplay:string='';
constructor(public navCtrl: NavController) {
}
onSelectChange(selectedValue: any) {
this.textToDisplay = "Selected "+selectedValue.length+" of "+this.options.length;
}
}
Here is the stackblitz link.
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>
I have 2 select in ionic 2 and i am able to dynamically populate the second based on the value selected in first. but i cannot set the selected default option after the population. i tried:
<ion-item>
<ion-label>City</ion-label>
<ion-select (ionChange)="setCity($event)">
<ion-option selected >City1</ion-option>
<ion-option >City2</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Zona</ion-label>
<ion-select >
<ion-option *ngFor ="let location of locations[city]"
[selected] = location.selected >
{{location.zone}}
</ion-option>
</ion-select>
</ion-item>
in .ts
this.locations = {'City1':[{ zone: 'Zone1', selected: true},{zone:'Zone2', selected: false}],
'City2': [{zone: 'Zone3', selected: false} {zone:'Zone4', selected: true}]}
setCity(event){
this.city = event;
}
there is no selected value after the second ion-select is populated
thank you.
Try setting the ngModel attribute in ion-select and value attribute in ion-option like below
<ion-label>Zona</ion-label>
<ion-select [(ngModel)]="mLocation" >
<ion-option [value] = "location" *ngFor ="let location of locations[city]"
[selected] = location.selected >
{{location.zone}}
</ion-option>
</ion-select>
Create a change event handler on the first select element. Then have that call a method, passing the selected value with it. Then do some checks on the selected values to determine if you want to show the next select and then the list.
Check out this StackOverflow question How to show second dropdown data based on previous dropdown selection
Working version: https://embed.plnkr.co/Qu1lL6PDIX2DTDGv01ZI/
UPDATE Display Default selected item
You wanna display Default selected item then you need to add these few line in your html page
like that:
<ion-label>District</ion-label>
<ion-select (ionChange). ....
<ion-option [value]="0" >select District</ion-option>
<ion-option [value]="sDistrict" *ngFor = ...
</ion-select>
and add these line in your type script(.ts) file
export class HomePage {
....
sState: number = "0";
sDistrict: number = "0";
.....
}
if you face any problem then let me know.
Using model driven form to select default option, so residence is already set:
<ion-select formControlName="residence">
<ion-option [value]='"0"'>{{freeCalcForm.controls.partyAName.value}}</ion-option>
<ion-option [value]='"1"'>{{freeCalcForm.controls.partyBName.value}}</ion-option>
</ion-select>
I don't see the selected value:
But clicking on the ion-select shows that the value is already selected correctly:
I tried selected="true" and selected="selected" on first option without any effect.
You should bind a model to your select:
<ion-select [(ngModel)]="myModel">
and set your default selection in the model. For example:
// page.html
<ion-select [(ngModel)]="gender">
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
// page.js
export class BasicPage {
gender: string = "f";
}
Example truncated from here.