Showing / Hiding List Dividers

[Calendee]

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

Generating list with dividers dynamically

Instead of trying to get the GUI portion of your app to do this, why not use JavaScript to accomplish it? I have a similar scenario in my app. I display a user’s entire Address Book in a list. I needed the first letter dividers as you see in iOS address book. So, I collect all the contacts (using PhoneGap API’s), then I iterate through them adding them to an object that has the first letters as properties. Then, I use 2 ng-repeats. One repeats for the first letters in the contacts object. …

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?

[Calendee]

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.

[LeZu]

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