I would like to display an ion-list with an ion-item-divider and ion-item. The ion-item is depending on ion-item-divider result.
So, this is my code:
<ion-list *ngFor="let group of groups">
<ion-item-divider>
{{ group.name }}
</ion-item-divider>
<ion-item ng-repeat="company in loadCompanies(group.id)">
<ion-avatar item-start>
<img src="img/avatar.png">
</ion-avatar>
<h2>{{ company.name }}</h2>
<p>Text example...</p>
</ion-item>
The ng-repeat is executing the loadCompanies function indefinitely... Do you have some tips to display the name of the company depending on the group id ..?
Related
I am working In Ionic App and I have shown the item list in which I have the checkbox for the item selection. User can select only one item but the problem is that, In my item list user is able to select all items.
This is my shopping.html:
<ion-list *ngFor="let itm of shippingdetails">
<ion-item-divider>
<ion-checkbox slot="end" [disabled]="isCheckboxDisabled" (ionChange)="selectCP(itm)"></ion-checkbox>
<!-- <ion-radio slot="start"></ion-radio> -->
<!-- <ion-toggle slot="start"></ion-toggle> -->
<ion-label>
<h2>{{itm.name}}</h2>
<p>{{itm.mobile}}</p>
<p>{{itm.state}}, {{itm.city}}</p>
<p>{{itm.address}}</p>
<p>Pincode: {{itm.pincode}}</p>
</ion-label>
<button ion-button outline item-end>
<ion-icon name="create"></ion-icon>
</button>
<button ion-button outline item-end>
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-divider>
</ion-list>
In this, I am showing the check-boxes with the items where user can select the item.
This is my shopping.ts:
isCheckboxDisabled:boolean=false;
selectCP(itm){
}
I am not able to make the logic for that. In my html, user can select all the items. Any help is much appreciated.
You may use ion-radio instead.
<ion-list>
<ion-radio-group>
<ion-item *ngFor="let itm of shippingdetails">
<ion-label>{{itm.name}}</ion-label>
<ion-radio value="{{itm.id}}"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
I'm new in Ionic and I want to create list in which in each ion-item there will be checbox and when user checks it then select will appear in new line but still within ion-item. I've tried to use ion-item inside ion-item but then select wasn't showing. I've read that there is some issue with nested ion-items so I replaced first ion-item with ng-container but after that all layout looks terrible. What should I do?
<ion-list>
<ng-container *ngFor="let filter of filters">
<ion-label> {{filter.name}}</ion-label>
<ion-checkbox item-right [(ngModel)]="filter.checked" (ionChange)="onCheckboxChange($event, filter)"></ion-checkbox>
<ion-item>
<ion-select [(ngModel)]="option">
<ion-option *ngFor="let option of filter.data" [value]="option">{{option.name}}</ion-option>
</ion-select>
</ion-item>
</ng-container>
</ion-list>
I figured it out - in ion-list I put ion-card-content with ngFor as a wrapper for ion-items. Works and looks good!
<ion-list>
<ion-card-content *ngFor="let filter of filters" class="card-wrapper">
<ion-item class="checkbox-item">
<ion-label> {{filter.name}}</ion-label>
<ion-checkbox item-right [(ngModel)]="filter.checked"></ion-checkbox>
</ion-item>
<ion-item>
<ion-select [(ngModel)]="option">
<ion-option *ngFor="let option of filter.data" [value]="option">{{option.name}}</ion-option>
</ion-select>
</ion-item>
</ion-card-content>
</ion-list>
Hello I am trying to make a app that when a user click's the add button opens another page that list's of all installed app's on that device then by clicking on a single app adds that app to the main page in a listview of my app and then the user can go back to the main page and click that app and it opens it from my app. I am using ionic 3 and am using the AppAvilability plugin to list all installed apps
here's my code for the main page:
<ion-header>
<ion-navbar>
<ion-buttons start>
<button ion-button icon-only solid>
<ion-icon name="add-circle"></ion-icon>
//add redirect to applist here
</button>
</ion-buttons>
<ion-title></ion-title>
<ion-buttons end>
<button ion-button icon-only solid>
<ion-icon name="remove-circle"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding id="page1">
<div class="spacer" style="height:30;" id="page1-spacer6"></div>
<ion-list id="page1-list1">
<ion-item color="none" href-inappbrowser="http://www.google.com" id="page1-list-item5">
<ion-avatar item-left>
<img src="assets/img/FUhCAggEQECSHctkev1s_web.png" />
</ion-avatar>
<h2>
Internet
</h2>
</ion-item>
</ion-list>
<div class="spacer" style="height:12;" id="page1-spacer1"></div>
<ion-list id="page1-list2">
<ion-item color="none" id="page1-list-item6">
<ion-avatar item-left>
<img src="assets/img/SWDHBJ2JRJyhl2rDAbPe_email.png" />
</ion-avatar>
<h2>
Email
</h2>
</ion-item>
</ion-list>
<div class="spacer" style="height:12;" id="page1-spacer2"></div>
<ion-list id="page1-list3">
<ion-item color="none" on-click="goToMath()" id="page1-list-item7">
<ion-avatar item-left>
<img src="assets/img/eRWr6of9Sq2eRPvM4LjM_math.png" />
</ion-avatar>
<h2>
Math
</h2>
</ion-item>
</ion-list>
<div class="spacer" style="height:12;" id="page1-spacer3"></div>
<ion-list id="page1-list4">
<ion-item color="none" on-click="goToScience()" id="page1-list-item8">
<ion-avatar item-left>
<img src="assets/img/Xtvlww5aS4SeDvBnE1FJ_sci.png" />
</ion-avatar>
<h2>
Science
</h2>
</ion-item>
</ion-list>
<div class="spacer" style="height:12;" id="page1-spacer4"></div>
<ion-list id="page1-list5">
<ion-item color="none" on-click="goToHandwriting()" id="page1-list-item9">
<ion-avatar item-left>
<img src="assets/img/eeisx650TqaSAMPn9EH4_handwrittin.png" />
</ion-avatar>
<h2>
Handwriting
</h2>
</ion-item>
</ion-list>
<div class="spacer" style="height:12;" id="page1-spacer5"></div>
<ion-list id="page1-list6">
<ion-item color="none" on-click="goToFlashcards()" id="page1-list-item10">
<ion-avatar item-left>
<img src="assets/img/noKqBQE1QbKdexCASz5g_flashcards.png" />
</ion-avatar>
<h2>
Flashcards
</h2>
</ion-item>
</ion-list>
<div>
<img src="assets/img/My3SIjXBSFoRJZG6yaWI_haQq7TIJRYeYrFNGbcvw_books.png" style="display:block;width:auto;height:auto;margin-left:auto;margin-right:auto;" />
</div>
</ion-content>
I'm new to ionic so any links/code samples on how to do would be amazing!
Thanks in advance!
Store all the apps in some sort of array. For example, you could make an array of object were each app has certain properties (a name etc.). Using *ngFor, you could list these in a view.
To push a page onto the navigation based on an entry you will want to import the NavController and NavParams. After that, create a page from the CLI using ionic g page appPage Then, you can inject the NavController and call .push('appPage') when the user clicks a button. Here is where you will want to push some data to the Navparams (navigation parameters) about which page was clicked. You can google "Angular Tour of Heroes" and follow the "detail view" guide they have on there so that you can associate each page in the list with a name of some sort.
After that, simply design your HTML and Typescript for the AppPage page to get a clean looking detailed pageview.
I would like to display a product list with ion-list and ion-item.
For each product, the first line show the product name and second line should show the product details in small fonts.
An icon on the right end to open a product detail page.
Below is the code snippet:
<ion-list>
<ion-item *ngFor="let product of productArray">
<ion-label>{{product.name}}</ion-label>
<div item-content>
Rate: {{product.rate}} Tax : {{product.tax}}
</div>
<button ion-button icon-only item-right (click)='editProduct(product)'>
<ion-icon name="arrow-dropright"></ion-icon>
</button>
</ion-item>
</ion-list>
The product details do not show on the second line. It shows on the first line with details aligned to the right.
Try this please:
<ion-list>
<ion-item *ngFor="let product of productArray">
<p>{{product.name}}</p>
<p>
Rate: {{product.rate}} Tax : {{product.tax}}
</p>
<button ion-button icon-only item-right (click)='editProduct(product)'>
<ion-icon name="arrow-dropright"></ion-icon>
</button>
</ion-item>
</ion-list>
I have a fairly simple template for ion-item cards:
<ion-list>
<div class="card">
<ion-item ng-repeat="item in items"
item="item"
ui-sref="main.tabs.create({id: item.id})">
<div class="item item-avatar item-fill-space">
<img data-ng-src="data:image/jpg;base64,{{ item.image[0] }}" data-err-src="../../../../../res/icons/android/icon-48-mdpi.png">
<h2>{{ item.title }}</h2>
</div>
<div class="item item-body item-fill-space">
{{ item.message }}
</div>
</ion-item>
</div>
<ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>
</ion-list>
It's appearing like this on the screen:
The horizontal line in the middle isn't reaching the full width of the container (with respect to the margin on the opposite side). How can I fix this?
I've tried adding the class
.item-fill-space {
width: 100%;
}
but it doesn't work unless I specify a width of more than 100%, but that's a bit hacky.
I have the same problem, with a similar code:
<ion-view>
<ion-content>
<ion-list>
<ion-item ng-repeat="aviso in avisos | filter: filter" href="#/app/avisos/{{aviso.id}}">
<div class="item item-divider aviso">
<strong>{{aviso.create_date | dateFormat}}</strong>
</div>
<div class="item aviso">{{aviso.formated_message}}</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
And, like DaveDev said, the only workaround solution is to use a width of more then 100% (in my case, 110% worked for the "aviso" class). But I'm not happy with this too.
'ion-content' comes with padding into it.
Try and see what happens when you take out that padding in your outer directive which contains your 'ion-list'.