Showing / Hiding List Dividers


#1

Please see this topic for info on how I ma currently displaying a list of contacts:

It works great… but… I also have a search box at the top. The user can filter the list based on the text in the search box. That works great… Unfortunately, it leaves all the list dividers in place. So, I end up with an ugly list with empty item-dividers like this:

Can anyone think of a way to have the item-divider detect if there is a sibling that follows of the class item-divider and if not then don’t display itself?

“I am an item-divider” -> Is my immediate sibling an item-divider? Yes -> hide myself. No - > show myself.

I know CSS3 allows for styling a sibling based on it’s PRECEDING sibling, but is there a way to style based on the FOLLOWING sibling?


Display contacts like ios native app
#2

I just checked to see how this works in the iOS 7 Contacts app. They don’t show the dividers at all when filtered. so, I just did this:

<div class="item item-divider" bindonce ng-repeat-start="(firstLetter, contacts) in fc.contacts" ng-show="fc.contactSearch === ''" > {{firstLetter}} </div>

Now, my dividers disappear when the user types in the filter list.

If it works for Apple, I guess it will do for me too.


#3

Hello could u please show me all the code for how you hide the list dividers?? great thanks