Issue
I have a category list it displays dynamically in rows and columns.
But I want to show only two rows and it if contains more than two rows than show button View More.
The current scenario is it shows all categories. But want show only 2 rows.
How to do this.
Response
[{"categoryId":"1","name":"General Knowledge","image":"https://codehub.biz/knowledgeup/API/images/gk_categaries_icons.png"},{"categoryId":"3","name":"Biology","image":"https://codehub.biz/knowledgeup/API/images/biology_categaries_icons.png"},{"categoryId":"4","name":"Chemistry","image":"https://codehub.biz/knowledgeup/API/images/Chemastry_Categaries_Icons.png"},{"categoryId":"5","name":"Economy","image":"https://codehub.biz/knowledgeup/API/images/Economy.png"},{"categoryId":"6","name":"Sports","image":"https://codehub.biz/knowledgeup/API/images/sports_categaries_icons.png"},{"categoryId":"7","name":"Physics","image":"https://codehub.biz/knowledgeup/API/images/physics.png"},{"categoryId":"8","name":"World Geography","image":"https://codehub.biz/knowledgeup/API/images/geo.png"},{"categoryId":"10","name":"Science & Inventions","image":"https://codehub.biz/knowledgeup/API/images/science.png"},{"categoryId":"11","name":"test","image":"https://codehub.biz/knowledgeup/API/images/bg.png"},{"categoryId":"12","name":"test1234","image":"https://codehub.biz/knowledgeup/API/images/2745032977bg.png"},{"categoryId":"13","name":"binjal","image":"https://codehub.biz/knowledgeup/API/images/651543756ON40S50.jpg"}]
tab1.html
<div>
<ion-label class="label">All</ion-label>
<ion-grid>
<ion-row class="margin" *ngFor="let row of grid">
<ion-col size="3" class="ion-text-center" *ngFor="let item of row"
(click)="quizInfo(item.categoryId,item.name,item.image)">
<img class="logo" [src]='item.image' *ngIf="item"> <br>
<p class="margin title" *ngIf="item">{{item.name}}</p>
</ion-col>
</ion-row>
</ion-grid>
</div>
tab1.ts
public categoryList: any;
grid: Array<Array<string>>;
gridLength: any;
getCategoryData() {
let loading = this.loadingCtrl.create({
spinner: 'circles',
message: 'Please wait...'
}).then(loading => loading.present());
this.authService.getData("getcategories.php").then((result) => {
this.categoryList = result;
console.log(this.categoryList);
this.grid = Array(Math.ceil(this.categoryList.length / 4)); //MATHS!
this.gridLength = this.grid.length;
console.log(this.gridLength);
if(this.gridLength>2){
this.txt = "more than 2 rows";
} else {
this.txt = "less than or equal to 2 rows";
}
console.log(this.txt);
let rowNum = 0; //counter to iterate over the rows in the grid
for (let i = 0; i < this.categoryList.length; i += 4) { //iterate images
this.grid[rowNum] = Array(4); //declare two elements per row
if (this.categoryList[i]) { //check file URI exists
this.grid[rowNum][0] = this.categoryList[i] //insert image
}
if (this.categoryList[i + 1]) { //repeat for the second image
this.grid[rowNum][1] = this.categoryList[i + 1]
}
if (this.categoryList[i + 2]) { //repeat for the second image
this.grid[rowNum][2] = this.categoryList[i + 2]
}
if (this.categoryList[i + 3]) { //repeat for the second image
this.grid[rowNum][3] = this.categoryList[i + 3]
}
rowNum++; //go on to the next row
}
this.loadingCtrl.dismiss();
}, (err) => {
this.loadingCtrl.dismiss();
console.log("Error", err);
});
}
Solution
You can track the indes and use it with ngIf.
<ion-row class="margin" *ngFor="let row of grid; let i = index;">
<ion-col *ngIf="i < 10"
.....
<span *ngIf="i === 10">Show more</span>
Something like this
Answered By - BrS
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.