Onsen UI list item with expandable functionality -
is there feature or technique implement list item on tapped gets expanded?
not sure if found solution already.
i looking similar today able make expandable list using angular's ng-show , scope.
i'm not sure if you're using angular have made example anyway.
you bind ng-show variable in scope (in example have assigned json scope variable , ng-show bound 'expand'):
listscope.items = [{heading:'heading item 1',details:'some details item', expand: false}, {heading:'heading item 2',details:'some other details item',expand: false}, {heading:'heading item 3',details:'im getting on typing out details items now',expand: false];
then in html have ng-repeat iterating through 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 function on scope called toggleexpandlist(item) toggles values of expand specific item clicked:
listscope.toggleexpandlist = function(item){ item.expand = !item.expand; //toggle between true , false }
then ng-show magic handles div.
see full example: http://codepen.io/mloughton/pen/jbwypk?editors=101
hopefully helps.
Comments
Post a Comment