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

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

java - How to filter a backspace keyboard input -

java - Show Soft Keyboard when EditText Appears -