How to make a collapsible list

ionic-v1
1

I have a set of collapsible lists and wonder if I am implementing in a good way. http://plnkr.co/edit/wnAQFuGtt7lh6p5TAjp4?p=preview

Aside from just wanting another set of eyes on it, my questions are:

  1. Is my use of $broadcast(‘scroll.resize’) correct here?

  2. I assume it’s ok to use ng-click on a div within ionic. On v0.96 it doesn’t usually fire the handler until a second tap, but this seems to have been fixed in the nightly. Testing on iOS7 Safari so far.

  3. How should I get a “slideDown” transition when the list is expanded? Do I look at documentation for ngAnimate or is there a more ionic specific way?

Thanks,
Damien

2
  1. Perfectly good use of scroll.resize.
  2. ng-click is fine as well. I’m not seeing your issue with requiring 2 clicks. Where are you seeing that? Oh - sorry. You said in 0.96 but good in nightlies.
  3. Animation : For this, you probably should make a directive that applies a class to the element on click. It’s not advisable to do this in the controller. In fact, each major list item could be put in a directive and the whole thing managed there rather than the controller.
3

It turns out that for the animation I need to know the item height, which is dynamic (and ‘auto’ doesn’t work for this supposedly). So I think I will use this plugin: http://angular-ui.github.io/bootstrap/

which has the “collapse” directive, so it’s a simple adjustment:

http://plnkr.co/edit/wnAQFuGtt7lh6p5TAjp4?p=preview (it works!)

The drawback is that it adds a dependency: bootstrap css (not the bootstrap js). And that is not fully compatible with Ionic – the conflict I found so far is that they both use the attribute “row” to mean different things. So bootstrap adds margin-left: -15px to “row” divs.

4

Update:

Downloading the stripped-down bootstrap css avoids the “row” conflict. It’s still 30k min though.

So I just grabbed the three css classes that are actually used for the collapse function. This removes the dependency on bootstrap css. I forked the plunkr to demonstrate this; added to the css file, and removed bootstrap.css.

2 Likes
5

Thanks @damienleri for the code reference.
Hello Ionic Team and all,
The collapsible list works well for me but I want to ask, is it a best practice to use Angular UI Bootstrap in Ionic i.e. Do Including external custom components like UI Bootstrap affect the Performance or native feel of an App?

1 Like