1

Is there a feature or technique to implement a list item that on tapped gets expanded?

petko
  • 153
  • 2
  • 14

1 Answers1

1

Not sure if you found a solution already.

I was looking for something similar like this today but was able to make an expandable list by just using angular's ng-show and the scope.

I'm not sure if you're using Angular but I have made an example for you anyway.

You bind ng-show to the variable in the scope (in my example I have assigned JSON to a scope variable and ng-show is bound to 'expand'):

listScope.items = [{heading:'heading for item 1',details:'some details about this item', expand: false}, 
{heading:'heading for item 2',details:'some other details about this item',expand: false},
{heading:'heading for item 3',details:'im getting over typing out details for items now',expand: false];

Then in my html I have a ng-repeat iterating through the items:

<ons-list ng-repeat='item in listScope.items'>
<ons-list-item ng-click="listScope.toggleExpandList(item)">
  <h3>{{item.heading}}</h3>
  <div ng-show="item.expand">
    {{item.details}}
  </div>
</ons-list-item>
</ons-list>

I have a function on the scope called toggleExpandList(item) which toggles the values of expand for that specific item that was clicked:

listScope.toggleExpandList = function(item){
item.expand = !item.expand; //toggle between true and false
}

Then the ng-show magic handles the div.

See full example: http://codepen.io/mloughton/pen/jbWYpK?editors=101

Hopefully it helps.

Matt
  • 11
  • 1