i have this 2 loops
<ion-list>
<ion-item ng-repeat="category in categories" href="#">
{{category.name}} {{category.id}}
<ion-item ng-repeat="test in tests" href="#">
{{test.name}} {{test.cat_id}}
</ion-item>
</ion-item>
</ion-list>
i want to test if(category.id === test.cat_id) then show the second list
i'm not sure if and how to use ngif, or if i should take care of this in the controller and return one object already formatted for my needs..
any ideas?
If I understand correctly you want to conditionally show the second ng-repeat. If that is the case then you can use this:
<ion-list>
<ion-item ng-repeat="category in categories" href="#">
{{category.name}} {{category.id}}
<ion-item ng-repeat="test in tests" href="#" ng-if="category.id === test.cat_id">
{{test.name}} {{test.cat_id}}
</ion-item>
</ion-item>
</ion-list>
Another option would be to use a filter like this:
<ion-list>
<ion-item ng-repeat="category in categories" href="#">
{{category.name}} {{category.id}}
<ion-item ng-repeat="test in tests | filter: {cat_id: category.id}" href="#" ng-if="category.id === test.cat_id">
{{test.name}} {{test.cat_id}}
</ion-item>
</ion-item>
</ion-list>
I would actually recommend the filter option.
What about something like this?
<ion-list>
<ion-item ng-repeat="category in categories" href="#">
{{category.name}} {{category.id}}
<ion-item ng-repeat="test in tests | filter:{cat_id: category.id}" href="#">
{{test.name}} {{test.cat_id}}
</ion-item>
</ion-item>
</ion-list>
Related
I have an issue with a function which loads posts with the ionic infinite scroll component.
The function works great on other components but in this one, the view doesn't update when I push new posts into the array.
This is the function that doesn't work:
// handles infinite scroll
// loads more posts when getting to the bottom of the page
async loadMorePosts(event): Promise<void> {
await this.postService.getUserPosts(this.userId, this.offset).toPromise().then((posts: Posts) => {
posts.rows.forEach((post: Post) => {
this.posts.push(post)
})
})
event.target.complete()
// increments offset for the next query
this.offset += this.offset
// if all data is loaded, disables infinite scroll
if (this.posts.length == this.totalPosts) {
event.target.disabled = true;
}
}
This is the one that works:
// handles infinite scroll
// loads more posts when getting to the bottom of the page
async loadMorePosts(event): Promise<void> {
await this.postService.getOwnPosts(this.offset).toPromise().then((posts: Posts) => {
return posts.rows.forEach((post: Post) => {
this.posts.rows.push(post)
})
})
event.target.complete()
// increments offset for the next query
this.offset += this.posts.offset
// if all data is loaded, disables infinite scroll
if (this.posts.rows.length == this.totalPosts) {
event.target.disabled = true;
}
}
Here is the html:
<ion-content>
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<ion-grid id="profile" class="ion-no-padding">
<ion-row class="ion-justify-content-center">
<ion-col class="profile" size="10">
<div>
<ion-avatar class="profile__avatar">
<ion-img src="/assets/img/profile_img.jpeg"></ion-img>
</ion-avatar>
</div>
<div class="profile__gym">
<div class="profile__gym-location">
<ion-icon name="location-sharp"></ion-icon>
<p>{{profile?.gym}}</p>
</div>
<div class="profile__gym-sport">
<ion-img src="/assets//img/male_flexin.png"></ion-img>
<p>{{profile?.discipline}}</p>
</div>
</div>
</ion-col>
</ion-row>
<ion-row class="ion-justify-content-center">
<ion-col size="9">
<div class="description">
<p>{{profile?.bio}}</p>
</div>
</ion-col>
</ion-row>
<ion-row class="ion-justify-content-evenly buttons">
<ion-col size="4">
<ion-button (click)="follow()" mode="ios" expand="block">
{{profile?.isFollowing ? "Abonné(e)" : "S'abonner" }}
</ion-button>
</ion-col>
<ion-col size="4">
<ion-button (click)="navigateToDirectMessages()" mode="ios" expand="block">
Écrire
</ion-button>
</ion-col>
</ion-row>
<ion-row class="ion-justify-content-center">
<ion-col size="10">
<div (click)="navigateToFollowers(profile?.user_id)" class="follow-count">
<div class="follow-count--flex-column txt-center">
<p>{{totalPosts}}</p>
<p class="follow-count__txt">Posts</p>
</div>
<div class="follow-count--flex-column txt-center">
<p>{{following?.count}}</p>
<p class="follow-count__txt">Abonnements</p>
</div>
<div class="follow-count--flex-column txt-center">
<p>{{followers?.count}}</p>
<p class="follow-count__txt">Abonnés</p>
</div>
</div>
</ion-col>
</ion-row>
<ion-row class="ion-justify-content-center ion-margin-bottom">
<ion-col size="10">
<div class="sections">
<div (click)="setSection(0)" class="sections__gallery">
<p>Gallerie</p>
<ion-icon *ngIf="indexSection == 0" name="ellipse"></ion-icon>
</div>
<div (click)="setSection(1)" class="sections__routine">
<p>Programmes</p>
<ion-icon *ngIf="indexSection == 1" name="ellipse"></ion-icon>
</div>
<div (click)="setSection(2)" class="sections__nutrition">
<p>Diète</p>
<ion-icon *ngIf="indexSection == 2" name="ellipse"></ion-icon>
</div>
</div>
</ion-col>
</ion-row>
<ion-row class="card-row">
<ion-col>
<ion-card class="card">
<ion-slides [options]="sliderOpts" #slides (ionSlideDidChange)="slideToSection()">
<ion-slide>
<div class="gallery">
<div class="gallery__img" *ngFor="let post of posts ; let i = index">
<ion-img (click)="openLightbox(i)" [src]="imgUrl+post?.img"></ion-img>
</div>
<div *ngIf="!posts" class="gallery__placeholder">
<ion-label>Cette section est vide</ion-label>
</div>
</div>
</ion-slide>
<ion-slide>
<div class="program">
<ion-card *ngFor="let program of profile?.programs ; let i = index">
<ion-item (click)="navigateToProgram(program?.id)" detail lines="none">
<ion-label>
<h5>
{{setDay(program?.day)}}
</h5>
</ion-label>
</ion-item>
<ion-item lines="none">
<ion-icon slot="start" size="small" name="time-outline"></ion-icon>
<ion-label>
{{program?.duration}}</ion-label>
</ion-item>
</ion-card>
<div *ngIf="profile?.programs?.length == 0" class="program__placeholder">
<ion-label>Cette section est vide</ion-label>
</div>
</div>
</ion-slide>
<ion-slide>
<div class="nutrition">
<ion-card (click)="navigateToMeal(meal?.id)" *ngFor="let meal of profile?.meals">
<ion-item class="nutrition__meal" detail lines="none">
<ion-label>
<h3>
{{meal?.name}}
</h3>
<p>{{meal?.time}}</p>
</ion-label>
<ion-label class="nutrition__meal-cal">
<h3>{{calculateTotalNutriments(meal?.meal_components,"kcal_100g") | number:'1.1-1'}}Kcal</h3>
</ion-label>
</ion-item>
<ion-item lines="none" class="nutrition__meal-macros">
<ion-icon class="proteins-ellipse" name="ellipse"></ion-icon>
<ion-label>
<h5>Protéines</h5>
<p>{{calculateTotalNutriments(meal?.meal_components,"proteins_100g") | number:'1.1-1'}}g</p>
</ion-label>
<ion-icon class="carbs-ellipse" name="ellipse"></ion-icon>
<ion-label>
<h5>Glucides</h5>
<p>{{calculateTotalNutriments(meal?.meal_components,"carbohydrates_100g") | number:'1.1-1'}}g</p>
</ion-label>
<ion-icon class="fat-ellipse" name="ellipse"></ion-icon>
<ion-label>
<h5>Lipides</h5>
<p>{{calculateTotalNutriments(meal?.meal_components,"fat_100g") | number:'1.1-1'}}g</p>
</ion-label>
</ion-item>
</ion-card>
<div *ngIf="profile?.meals?.length == 0" class="nutrition__placeholder">
<ion-label>Cette section est vide</ion-label>
</div>
</div>
</ion-slide>
</ion-slides>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
<app-lightbox id="lightbox" class="lightbox" [totalPosts]="totalPosts" [postIndex]="postIndex" [posts]="posts">
</app-lightbox>
<ion-infinite-scroll (ionInfinite)="loadMorePosts($event)">
<ion-infinite-scroll-content loadingSpinner="crescent">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
I'm new to this so if some informations are lacking or my request isn't properly formed, please feel free to say so.
Thanks for the help
You are missing the return keyword.
await this.postService.getUserPosts(this.userId, this.offset).toPromise().then((posts: Posts) => {
return posts.rows.forEach((post: Post) => {
this.posts.push(post)
})
})
My problem has been solved. There were conflicts with the card margin and overflow when the change detection was triggered, the new post was hidden underneath.
Am learning ionic however with the following code
#ViewChild(MultiImageUploadComponent) multiImageUpload: MultiImageUploadComponent;
however when i try to implement tabs using ion-segment and ng-switch i cant seen to access multiImageUpload from the second tab. like so . i keep getting the error co.multiImageUpload is undefined whenever switching to the second tab
<ion-segment [(ngModel)]="defaultTab">
<ion-segment-button value="managePhotos">
Manage Photos
</ion-segment-button>
<ion-segment-button value="addPhotos">
Add Photos
</ion-segment-button>
</ion-segment>
<div [(ngSwitch)]="defaultTab">
<ion-grid *ngSwitchCase="'managePhotos'">
<ion-row>
<ion-col col-6 col-md-4 col-xl-3 *ngFor="let photo of storyData.photos">
<div class="image-container" [style.background-image]="'url('')'" (click)='photo()'></div>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid *ngSwitchCase="'addPhotos'">
<ion-row>
<multi-image-upload></multi-image-upload>
<button ion-button block (click)="newStory()" *ngIf="!multiImageUpload.isUploading && !uploadFinished">
<ion-icon name="checkmark"></ion-icon>
Upload
</button>
<button ion-button block (click)="cancel()" color="danger" *ngIf="multiImageUpload.isUploading && !uploadFinished">
<ion-icon name="close"></ion-icon>
Cancel
</button>
</ion-row>
</ion-grid>
</div>
I am having an list item in which each list item has an button based on a condition. If I click the button it should show popup and if I click the list item it should go to next page but what happens is if I click the button it shows the popup as well as in background it goes to the next page can anyone tell me how to handle this.
Html:
<ion-list class="trans-item">
<div class="FramerList list" ng-repeat="bill in vm.bills | filter: vm.search">
<a class="item item-icon-left" ng-if="bill.bill_paid==='true'" ng-click="vm.gotoBillDetail(bill)">
<i class="icon ion-checkmark-circled"></i>
{{"bno_message" | translate}} {{ bill.bill_no }}
</a>
<a class="item item-icon-left item-button-right" ng-if="bill.bill_paid==='false'" ng-click="vm.gotoBillDetail(bill)">
<i class="icon ion-close-circled"></i>
{{"bno_message" | translate}} {{ bill.bill_no }}
<button class="button button-small billbook-button" ng-click="vm.billpaid(bill)">{{"farmerbillpaid_message" | translate}}</button>
</a>
</div>
</ion-list>
You can try something like this :
<ion-list class="trans-item">
<div class="FramerList list" ng-repeat="bill in vm.bills | filter: vm.search">
<a class="item item-icon-left" ng-if="bill.bill_paid==='true'" ng-click="vm.gotoBillDetail(bill)">
<i class="icon ion-checkmark-circled"></i>
{{"bno_message" | translate}} {{ bill.bill_no }}
</a>
<a class="item item-icon-left item-button-right" ng-if="bill.bill_paid==='false'" ng-click="vm.gotoBillDetail(bill)">
<i class="icon ion-close-circled"></i>
{{"bno_message" | translate}} {{ bill.bill_no }}
</a>
<button class="button button-small billbook-button" ng-click="vm.billpaid(bill)">{{"farmerbillpaid_message" | translate}}</button>
</div>
</ion-list>
I'm trying to figure out why this toggle on Ionic with Angular doesn't work. I think that the scope of ion-nav-buttons and ion-content are conflicting.
<ion-view view-title="Movimentação">
<ion-nav-buttons side="right">
<button class="button button-icon" id="header-filter" ng-click="showFilters = showFilters ? false : true">
<i class="icon ion-search"></i>
</button>
</ion-nav-buttons>
<ion-content>
<ul class="list" ng-show="showFilters">
<label class="item item-input item-select">
<div class="input-label">
CRAAI
</div>
<select>
<option ng-repeat="item in craai"> {{ item.regiao }} </option>
</select>
</label>
</ul>
</ion-content>
</ion-view>
Can anyone help with this?
At the moment, when a user with limited real estate decides to scroll down in my application, they are greeted with the following:
When really, I would like the the header items of What are you looking for? and Current location to be fixed:
This is my code so far:
<ion-view view-title="Nearby">
<ion-content>
<!-- Search -->
<div class="list">
<div class="item item-input-inset" style="border: 0px; padding-bottom: 0px; background-color: #2784c9;">
<label class="item-input-wrapper">
<input type="search" placeholder="What are you looking for?" style="width: 100%" ng-model="services" ng-click="showLocations=false; showServices=false">
</label>
<div class="item item-input-inset" style="border-top: 0px; background-color: #2784c9; margin-left: -2px;">
<label class="item-input-wrapper">
<input type="search" placeholder="Current location" style="width: 100%" ng-model="location" ng-click="showLocations=true; showServices=true">
</label>
<button class="button button-positive button-small" ng-click="location=''; services=''">
<i class="ion-close"></i>
</button>
</div>
</div>
<!-- List of services -->
<div class="list" style="margin-top:-24px">
<ion-list>
<ion-item ng-repeat="service in serviceList | filter:services" href="#/app/services/{{service.id}}" class="item-icon-right" ng-hide="showServices">
{{service.title}}
<i class="icon ion-chevron-right icon-accessory">
<span class="badge badge-positive">{{service.total}}</span>
</i>
</ion-item>
</ion-list>
</div>
<!-- List of regions -->
<div class="list" style="margin-top:-24px">
<ion-list>
<ion-item ng-repeat="location in locationList | filter:location track by $index" href="#/app/locations/{{location.id}}" ng-click="setLocation(location)" class="item-icon-right" ng-show="showLocations">
{{location.title}}
<i class="icon ion-chevron-right icon-accessory">
<span class="badge badge-positive">{{location.count}}</span>
</i>
</ion-item>
</ion-list>
</div>
</ion-content>
</ion-view>
I've also created a CodePen here: http://codepen.io/anon/pen/VeQzBv.
You can use a sub-header for this it work for my code:
<ion-header-bar class="bar-light bar-subheader">
<input type="text" placeholder="Search Force" data-ng-model="searchForce">
<button ng-if="searchForce.length"
class="button button-icon ion-android-close input-button"
ng-click="clearSearch()">
</button>
</ion-header-bar>
Codepen demo
Also see this post for some alternatives: http://forum.ionicframework.com/t/how-to-make-search-bar-sticky/20721