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.
Related
I created a menu component which has the menu-button and the ion-menu inside because i want to use this component on multiple pages. To use this component on different pages, i created a module with the menu component inside which than gets imported on every page that should have the menu.
When accessing the page i get the error
Menu: must have a "content" element to listen for drag events on
app.component.html
<ion-app>
<ion-router-outlet id="main-menu"></ion-router-outlet>
</ion-app>
menu.component.html
<div id="menu-button" (click)="this.toggleMenu()">
<span></span>
<span></span>
<span></span>
</div>
<ion-menu side="start" contentId="main-menu" menuId="main-menu">
<ion-content>
<ion-menu-toggle auto-hide="false">
<ion-list lines="none">
<ion-item [routerLink]="'/list-view'">
<ion-icon name="list-outline" slot="start"></ion-icon>
{{ 'PAGES.LISTVIEW.LISTVIEW' | translate }}
</ion-item>
<ion-item [routerLink]="'/settings'">
<ion-icon name="list-outline" slot="start"></ion-icon>
{{ 'PAGES.SETTINGS.PKEY' | translate }}
</ion-item>
<ion-item (click)="logout()">
<ion-icon name="log-out-outline" slot="start"></ion-icon>
{{ 'PAGES.LOGIN.LOGOUT' | translate }}
</ion-item>
</ion-list>
</ion-menu-toggle>
</ion-content>
</ion-menu>
I use ion-split-pane directly inside
this code works:
app.component.html
<ion-app>
<ion-split-pane contentId="menu-content">
<ion-menu contentId="menu-content" menu="menu-content-dx" side="end" type="overlay">
<ion-header>
<ion-menu-toggle>
<ion-toolbar>
<ion-title>menu (under construction) </ion-title>
</ion-toolbar>
</ion-menu-toggle>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle>
<ion-item [routerLink]="['/auth/logout']">
<ion-icon name="information-outline" slot="start"></ion-icon>
<ion-label>Logout</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<!-- router outlet here -->
<ion-router-outlet id="menu-content" main></ion-router-outlet>
</ion-split-pane>
</ion-app>
home.page.html
in toolbar reference to menu id : menu="menu-content-dx"
<ion-header [translucent]="true">
<ion-toolbar>
<ion-buttons slot="end">
<ion-menu-button menu="menu-content-dx"></ion-menu-button>
</ion-buttons>
<ion-title>
home menu
</ion-title>
</ion-toolbar>
</ion-header>
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 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 !!!!
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'
];
}
I'm currently working on my first Ionic app and with it my first exposure to Angular. My current hurdle is injecting group headers ("A", "B", "C", and so on) into a longish list (~600) of alphabetically sorted names. I've looked into solutions with filters, nested ngRepeats (which, specifically, didn't seem to play nice with Ionic's collection-repeat), but would like to accomplish this without the need for filtering or third-party dependencies like lodash or underscores.
My current target solution is to use a directive to prepend the header to the first element of each group of names.
The app is consuming content from Contentful's API and in the service I'm manually adding a group identifier based on the name's first letter. An example data set might be:
[
{"id":"1","name":"Carrie","group":"C"},
{"id":"2","name":"Gabe","group":"G"},
{"id":"3","name":"Gerry","group":"G"},
{"id":"4","name":"Hector","group":"H"},
{"id":"5","name":"Hilbert","group":"H"}
]
Here's the template:
<ion-content>
<ion-list>
<div collection-repeat="person in People" group-header>
<ion-item class="item-icon-right" type="item-text-wrap" href="#/app/people/{{ person.id }}" group="{{ person.group }}">
<h2>{{ person.name }}</h2>
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</div>
</ion-list>
</ion-content>
Here's the directive:
.directive('groupHeader', function () {
return {
compile: function (element) {
element.prepend('<div class="item item-divider" is-divider>{{ person.group }}</div>');
}
}
})
And currently, as expected, the prepend occurs for each repeated item:
<div collection-repeat="name in Names" group-header>
<div class="item item-divider ng-binding">C</div>
<ion-item class="item-icon-right item item-complex" type="item-text-wrap" href="#/app/names/1" group="C">
<a class="item-content" ng-href="#/app/names/1" href="#/app/names/1">
<h2 class="ng-binding">Carrie</h2>
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
</ion-item>
</div>
<div collection-repeat="name in Names" group-header>
<div class="item item-divider ng-binding">G</div>
<ion-item class="item-icon-right item item-complex" type="item-text-wrap" href="#/app/names/2" group="G">
<a class="item-content" ng-href="#/app/names/2" href="#/app/names/2">
<h2 class="ng-binding">Gabe</h2>
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
</ion-item>
</div>
I'd like to know if there are any recommendations for updating the directive so that it only prepends on the first instance of name in a given group. I'm happy to be pointed to resources, rather than a longhand solution--but either will be much appreciated.
Thanks!
I was able to accomplish what I was after with an ng-switch in the template:
<ion-content>
<ion-list>
<div collection-repeat="person in People">
<ng-switch on="$first || person.group != People[$index-1].group">
<ion-item type="item-text-wrap" ng-switch-when="true">
{{ person.group }}
</ion-item>
</ng-switch>
<ion-item class="item-icon-right" type="item-text-wrap" href="#/app/people/{{ person.id }}" group="{{ person.group }}">
<h2>{{ person.name }}</h2>
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</div>
</ion-list>
</ion-content>
Thanks to: https://stackoverflow.com/a/14076254/3426040.