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';
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>
In my ionic select i got output like small down arrow rather than a full select tag and for input tag just a blank space. I can enter data but UI not looks good. Is there any css i need to add.
<ion-card class='sc-ion-card-md-h'>
<ion-card-header>
<ion-card-subtitle>Name:</ion-card-subtitle>
<ion-card-title>
<ion-select #inputName id="username" class="form-control">
<ion-select-option>SELECT</ion-select-option>
<ion-select-option>Monicka</ion-select-option>
<ion-select-option>Hema</ion-select-option>
<ion-select-option>Ramesh</ion-select-option>
<ion-select-option>Madhavan</ion-select-option>
<ion-select-option>Aadhavan</ion-select-option>
<ion-select-option>Madhan</ion-select-option>
<ion-select-option>Prasanth</ion-select-option>
</ion-select>
</ion-card-title>
</ion-card-header>
<ion-card-header>
<ion-card-subtitle>Date:</ion-card-subtitle>
<ion-card-title>
<ion-input type="text" #inputDate id="date" class="form-control"></ion-input>
</ion-card-title>
</ion-card-header>
</ion-card>
Output looks like this...
It seems like you are trying to convert a Bootstrap form over to Ionic and you are bringing some jQuery thinking along with it.
This is how you would do it with an Ionic page:
page.html
<ion-header>
<ion-toolbar>
<ion-title>card-select</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<ion-list>
<ion-item>
<ion-label position="stacked">Name:</ion-label>
<ion-select [(ngModel)]="username" placeholder="SELECT">
<ion-select-option>Monicka</ion-select-option>
<ion-select-option>Hema</ion-select-option>
<ion-select-option>Ramesh</ion-select-option>
<ion-select-option>Madhavan</ion-select-option>
<ion-select-option>Aadhavan</ion-select-option>
<ion-select-option>Madhan</ion-select-option>
<ion-select-option>Prasanth</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label position="stacked">Date:</ion-label>
<ion-input [(ngModel)]="date"></ion-input>
</ion-item>
</ion-list>
</ion-card>
</ion-content>
page.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-card-select',
templateUrl: './card-select.page.html',
styleUrls: ['./card-select.page.scss'],
})
export class CardSelectPage implements OnInit {
username: string;
date: string;
constructor() { }
ngOnInit() {
}
}
notes
You don't need all those classes you put on.
Using label position="stacked" puts it above the input.
You dont need to bind the name like #username or id="username". What you do is put a variable on the page behind it and then use ngModel to bind to it. Any change that is made to the user interface (typing into a box, selecting an option) is then automatically set to the variable in the page. This works both ways because of the [()] syntax, so if you change username with something like this.username = "superman"in the code then the input box on the page will automatically update to match that value as well.
You don't need type="text" on the input, its the default.
You can use the placeholder attrib to pass some SELECT text instead of having an extra select option.
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 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.
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>