javascript - Most sensible way to insert DOM element at specific point within ng-repeat? -


i'm looking create podcast player application using angularjs.

so far, i've got list of podcasts available play, using ng-repeat, looks this.

<ul ng-controller="list">   <li ng-repeat="podcast in podcasts" ng-click="startplaying()">     <p>{{podcast.created_time | date}}</p>     <div class="podcast-icon" style="background-image:url('{{podcast.icon}}')">       <i class="fa fa-play"></i>     </div>     <h3>{{podcast.name}}</h3>     <p>{{podcast.duration}}m</p>   </li> </ul>

these displaying in responsive flexbox grid, , want want function startplaying trigger player appear, on row below clicked item, similar netflix.

i'm confused how to:

  1. get index of <li> element at end of row of clicked element, given grid responsive , number of <li>s on each row changes viewport.
  2. tell angular insert new dom element after particular index in ng-repeat.

i suppose infer number of <li>s per row width of parent, window.getcomputedstyle(ul).width, seems roundabout. there better way?

thanks!

you can access index of li following:

{{$index}}

or even:

{{podcasts.indexof(podcast)}}

if fed click event add element in corresponding function, this:

<li ng-repeat="podcast in podcasts" ng-click="startplaying($index)">

but need select correct element give li class:

<li class="podcast" ng-repeat="podcast in podcasts" ng-click="startplaying($index)">

then in startplaying function select element index , append element:

$scope.startplaying = function(index) {   var podcasts = document.getelementsbyclassname('podcast')   var currentpodcast = podcasts[index]   angular.element(currentpodcast).append('<html></html>'); }

just replace <html></html> element want append.


Comments

Post a Comment

Popular posts from this blog

javascript - Create a stacked percentage column -

i have collection of data : var data = [ {"p301a":"10","p301b":"7","p301c":"7","p301d":"3","p301e":"8","p301f":"8","p301g":"8","p301h":"8","p301i":"8","p301j":"8","p301k":"8","p301l":"8","p301m":"8","p301n":"8","p301o":"8","age":"31-40 years","profesion":"2","position":"2"}, {"p301a":"5","p301b":"4","p301c":"4","p301d":"4","p301e":"4","p301f":"4","p301g":"4","p301h":"4","p301i":"4","p301j":"4","p301k":"4...
Read more

Optimising Firebase database by automatically overwriting data -

in firebase app have following structure: posts latest all users can write posts > latest . want limit entries 20 posts save space in database. , posts beyond 20 unnecessary never shown on homepage. how can limit posts 20, when user writes posts > latest posts @ end drop off (be deleted) automatically? this sample should you. you need : const max_log_count = 20; exports.removeold = functions.database.ref('/posts/latest/{postid}').oncreate(event => { const parentref = event.data.ref.parent; return parentref.once('value').then(snapshot => { if (snapshot.numchildren() >= max_log_count) { let childcount = 0; const updates = {}; snapshot.foreach(function(child) { if (++childcount <= snapshot.numchildren() - max_log_count) { updates[child.key] = null; } }); // update parent. removes children. ...
Read more

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -

Image
each grid cell can have more 1 customtemplate loaded. have directive holds watcher on model_col_field listen cell updates on scroll when dom rows updated , recompile celltemplate . without watcher , $compile rows repeat on scroll, showing same set of rows. is there more angular way of approaching or way improve performance? relevant controller code: create gridoptions.data & gridoptions.columndefs : var customtemp = '<div ng-repeat="opt in grid.appscope.colvalueoptionsmodel" ng-init="tempstring=model_col_field.clazz+opt.key;"><comparison-directive dbo="model_col_field" attobj="opt" fff="grid.appscope.getattributetemplate(tempstring)" /></div>'; $scope.gridoptions.columndefs = [ { name:'yindex',pinnedleft:true,celltemplate: customtemp, displayname:'index'}, { name:'col1',celltemplate: customtemp}, { name:'col2',celltemplate: c...
Read more