Thursday, 10 September 2015

Filtering data displayed in an AngularJs repeat

I recently had trouble when trying to display a list of products in a 2 column grid. I had a list of products and each product had the potential to hold a list of "flexi" products within those products.

The problem was that I only wanted to display the flexi products, and only had access to the parent product list. So, when trying to display them, I had to loop through the products to display the flexis, but I was unintentionally displaying a column for each product regardless of whether it had any flexis:
Code:


I tried a lot of different ways to try and configure the display; I started off with many ng-if/ng-show/ng-hide checks, but I couldn't figure out how to access the data in the scope of the child of the repeat (product in data.Products), only the parent (data.Products) while trying to refine how the parent is displayed. I then moved onto creating new refined lists on the AngularJS side to use instead of data.Products, but no matter what I tried I couldn't display it properly (loops in loops to access the flexi list seemed to be losing scope when displayed).

After some deliberation I thought the best way to do it would be on the .ascx side anyway, so after some research I found a fix:
This article helped solve the issue: http://stackoverflow.com/questions/18644412/angularjs-filter-not-null

Result:



No comments:

Post a Comment