I am using ionic 2 for making mobile application. When I use selected attribute in ion-select element its working for one page but when i am using it for another page(component)its not working .
I am new to Ionic-2
My code for working selected attribute is given below:
<ion-item>
<ion-label>IO/WBS</ion-label>
<ion-select interface="popover">
<ion-option value="Department1" selected>Department 1</ion-option>
<ion-option value="Department2 ">Department 2</ion-option>
<ion-option value="Department3 ">Department 3</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Approver</ion-label>
<ion-select interface="popover">
<ion-option value="Manager1" selected>Manager 1</ion-option>
<ion-option value="Manager2 ">Manager 2</ion-option>
<ion-option value="Manager3 ">Manager 3</ion-option>
</ion-select>
</ion-item>
</ion-list>
And my code for non-working "selected" in "ion-select" element is give below:
<ion-item>
<ion-label>Expense Details</ion-label>
<ion-select interface="popover" name="check" [(ngModel)]="check" (ionChange)="Change(check)">
<ion-option value="Bus fare" selected>Bas Fare</ion-option>
<ion-option value="Train Fare">Train Fare</ion-option>
<ion-option value="other">Other</ion-option>
</ion-select>
</ion-item>
<textarea id="box" rows=3 cols=35 style="display:none;text-align:center;" name="description" [(ngModel)]="description" ></textarea>
<ion-grid>
<ion-row>
<ion-col col-6>
<ion-label>Select Currency</ion-label>
<ion-select interface="popover" name="currency" [(ngModel)]="currency">
<ion-option value="INR" selected>INR</ion-option>
<ion-option value="GBP ">GBP</ion-option>
</ion-select>
</ion-col>
<ion-col col-6>
<ion-item>
<ion-label floating >Amount</ion-label>
<ion-input required type="number" name="amount" [(ngModel)]="amount"></ion-input >
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-list>
I solved it for "Currency filed" by fixing it variable because
if you add ngModel then it won’t select any of them unless you set the variable to one of the values in the component.
for example :
this.dateExp = "";
this.check = "Bus fare";
this.amount = 0;
this.currency = "INR";
this.description =""
Its working for "INR" but not for Expense details Field .
Anybody suggest me !!!!
Related
I'm trying to get an array with a multi checkbox on ionic 4, can someone help me?
<ion-item>
<ion-label position="floating">0</ion-label>
<ion-checkbox color="primary" value="0"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label position="floating">1</ion-label>
<ion-checkbox color="secondary" value="1"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label position="floating">2</ion-label>
<ion-checkbox color="danger" value="2"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label position="floating">3</ion-label>
<ion-checkbox color="light" value="3"></ion-checkbox>
</ion-item>
So you want to get an array from your .ts file to your html dynamically and load the content into the ion-items? Set a global variable into your .ts file. Lets call it data.
Then your html should look like this:
home.html:
<ion-list *ngFor="let data-object of data">
<ion-item>
<ion-label position="floating">{{data-object.value}}</ion-label>
<ion-checkbox color="secondary" value="{{data-object.value}}"></ion-checkbox>
</ion-item>
</ion-list>
Where data is your array with data objects.
I am using ionic and I am trying to edit a form where this select option has multiple values. This code is not setting the options to selected. What is wrong?
list_of_house is a array example list_of_house = ['house1','house2','house3];
<ion-label>House:</ion-label>
<ion-select ngModel={{list_of_house}} #house name="house" multiple="true">
<ion-option value='house1'>house1</ion-option>
<ion-option value='house2'>house2</ion-option>
<ion-option value='house3'>house3</ion-option>
<ion-option value='house4'>house4</ion-option>
<ion-option value='house5'>house5</ion-option>
<ion-option value='house6'>house6</ion-option>
<ion-option value='house7'>house7</ion-option>
<ion-option value='house8'>house8</ion-option>
<ion-option value='house9'>house9</ion-option>
<ion-option value='house10'>house10</ion-option>
<ion-option value='house11'>house11</ion-option>
<ion-option value='house12'>house12</ion-option>
<ion-option value='house13'>house13</ion-option>
<ion-option value='house14'>house14</ion-option>
<ion-option value='house15'>house15</ion-option>
<ion-option value='house16'>house16</ion-option>
<ion-option value='house17'>house17</ion-option>
<ion-option value='house18'>house18</ion-option>
<ion-option value='house19'>house19</ion-option>
<ion-option value='house20'>house20</ion-option>
<ion-option value='house21'>house21</ion-option>
</ion-select>
In case if you are using ionic v1 then you check box control for multiple options and to bind all the options with the model as below for eg.
<ion-checkbox ng-model="list_of_house.house1">House1</ion-checkbox>
In case of ionic 2 use below :
<ion-list>
<ion-item>
<ion-label>Toppings</ion-label>
<ion-select [(ngModel)]="toppings" multiple="true" cancelText="Nah" okText="Okay!">
<ion-option value="bacon" selected="true">Bacon</ion-option>
<ion-option value="olives">Black Olives</ion-option>
<ion-option value="xcheese" selected="true">Extra Cheese</ion-option>
<ion-option value="peppers">Green Peppers</ion-option>
<ion-option value="mushrooms">Mushrooms</ion-option>
<ion-option value="onions">Onions</ion-option>
<ion-option value="pepperoni">Pepperoni</ion-option>
<ion-option value="pineapple">Pineapple</ion-option>
<ion-option value="sausage">Sausage</ion-option>
<ion-option value="Spinach">Spinach</ion-option>
</ion-select>
</ion-item>
</ion-list>
I am trying to create a list with cities under each state code.
I have an array of states like this:
states = [{ state:"AK",
Cities:[{cityName:"Anchorage",
cityCode:"ANC"},
{cityName:"Barrow",
cityCode: "BRW"}]
},
{
state:"AL",
Cities:[{cityName:"Anniston",
cityCode:"ANB"},
{cityName:"Birhimgham",
cityCode: "BHM"}]
}]
Now, i want to display the list of cities by state where state are list headers.
<ion-content>
<ion-list>
<ion-item class="item-divider" ng-repeat="state in states"> {{state.state}}
<ion-list>
<ion-item ng-repeat="city in state.Cities">
{{city.CityName}}
</ion-item>
</ion-list>
</ion-item>
</ion-list>
</ion-content>
The above code gives output as:
But, it currently looks like
I want the output to look like
How to make it happen?
Hope this solves your problem:
<ion-content>
<ion-list ng-repeat="state in states">
<ion-list-header>{{state.state}}</ion-list-header>
<ion-item ng-repeat="city in state.Cities">{{city.CityName}}</ion-item>
</ion-list>
</ion-content>
Or this one's exact:
<ion-content>
<ion-item-group ng-repeat="state in states">
<ion-item-divider color="light">{{state.state}}</ion-item-divider>
<ion-item ng-repeat="city in state.Cities">{{city.CityName}}</ion-item>
</ion-item-group>
</ion-content>
https://ionicframework.com/docs/components/#list-dividers
I would like to put a message that says the list is empty if it contains nothing. If my table is empty I would like it to display a message like "No group" or "No Category".
My code :
<ion-list>
<ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}">
<i class="icon" ng-class="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"></i>
Group 1 :
</ion-item>
<ion-item class="item-accordion" ng-repeat="item in group track by $index" ng-show="isGroupShown(group)">
{{item.groupName}}
</ion-item>
</ion-list>
<div class="spacer" style="width: 283.2px; height: 10px;"></div>
<ion-list>
<ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}">
<i class="icon" ng-class="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"></i>
Category :
</ion-item>
<ion-item class="item-accordion" ng-repeat="item in category track by $index" ng-show="isGroupShown(group)">
{{item.categoryName}}
</ion-item>
</ion-list>
in my controller :
$scope.group = [];
$scope.toggleGroup = function(group) {
if ($scope.isGroupShown(group)) {
$scope.shownGroup = null;
} else {
$scope.shownGroup = group;
}
};
Thank you :)
use ng-if for hide and show "No group" information
<ion-list>
<ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}">
<i class="icon" ng-class="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"></i>
Group 1 :
</ion-item>
<ion-item class="item-accordion" ng-repeat="item in group track by $index" ng-show="isGroupShown(group)">
{{item.groupName}}
</ion-item>
<ion-item ng-if="group.length"> // hide an show "no Group" part
No Group
</ion-item>
</ion-list>
<div class="spacer" style="width: 283.2px; height: 10px;"></div>
<ion-list>
<ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}">
<i class="icon" ng-class="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"></i>
Category :
</ion-item>
<ion-item class="item-accordion" ng-repeat="item in category track by $index" ng-show="isGroupShown(group)">
{{item.categoryName}}
</ion-item>
<ion-item ng-if="category .length"> // hide an show "no category" part
No category
</ion-item>
</ion-list>
Presently working on ionic2 and angular2
I am having fields of 7 checkboxes. I need to select only one particular checkbox the remaining checkboxes should be disabled.Similarly, I need to get for remaining 6 checkboxes also. How can I do that,
Here is the code I have used in my HTML
// payment.HTML
<ion-card class="ion-card">
<ion-item>
<ion-label>Cash On Delivery</ion-label>
<ion-checkbox item-right checked="true" [(ngModel)]="checked"></ion-checkbox>
</ion-item>
<ion-item no-lines>
<ion-label>PayuMoney Wallet</ion-label>
<ion-checkbox item-right checked="false" [(ngModel)]="checked"></ion-checkbox>
</ion-item>
<ion-item no-lines>
<ion-label>Pay with Paytm Wallet</ion-label>
<ion-checkbox item-right checked="false" [(ngModel)]="checked"></ion-checkbox>
</ion-item>
<ion-item no-lines>
<ion-label>Credit/ Debit Card</ion-label>
<ion-checkbox item-right checked="false" [(ngModel)]="checked"></ion-checkbox>
</ion-item>
<ion-item no-lines>
<ion-label>Net Banking</ion-label>
<ion-checkbox item-right checked="false" [(ngModel)]="checked"></ion-checkbox>
</ion-item>
<ion-item no-lines>
<ion-label>PayZapp</ion-label>
<ion-checkbox item-right checked="false" [(ngModel)]="checked"></ion-checkbox>
</ion-item>
<ion-item no-lines>
<ion-label>Pay using MobiKwiK Wallet</ion-label>
<ion-checkbox item-right checked="false" [(ngModel)]="checked"></ion-checkbox>
</ion-item>
</ion-card>
This might do what you want (not tested):
<ion-card class="ion-card">
<ion-item *ngFor="let item of options; let i=index">
<ion-label>{{item}}</ion-label>
<ion-checkbox item-right [ngModel]="checkedIdx == i"(ngModelChange)="$event ? checkedIdx = i : checkedIdx = -1" [disabled]="checkedIdx >= 0 && checkedIdx != i"></ion-checkbox>
</ion-item>
</ion-card>
class MyComponent {
checkedIdx=0;
options = [
'Cash On Delivery',
'PayuMoney Wallet',
'Pay with Paytm Wallet',
'Credit/ Debit Card',
'Net Banking',
'PayZapp',
'Pay using MobiKwiK Wallet'
];
}