angularjs - $broadcast appending dynamic data (rows) at wrong place using ng-scrollbar -

angularjs - $broadcast appending dynamic data (rows) at wrong place using ng-scrollbar -

i have used ng-scrollbar :

<tbody ng-scrollbar rebuild-on="rebuild:me" class="scrollme" id ="tempid">

and in ng table , included broadcast

getdata: function($defer, params) {

$scope.$broadcast('rebuild:me');

now ng-repeat populating tr in thead after first th instead of appending/loading correctly in tbody

how correctly display results?

did seek this

getdata: function($defer, params) { $defer.promise.then(function(){ $scope.$broadcast('rebuild:me'); }; ...

right after updating table

edit 1

tbody replacing div , how layout became messy,check plunk

edit 2

here workaround this,need editing,i update later

edit 3(final)

finally working example of ngtable , ngscrollbar together,but not beautiful solution still:

1.

you need separate thead rest of table new table locate right above main table

<thead> <tr > <th class="sortable" ng-class="{ 'nameasc':'sort-asc' , 'namedesc':'sort-desc' }[sorttableparam]" ng-click="sortby('name')"> <div>name</div> </th> <th class="text-center sortable" ng-class="{ 'ageasc':'sort-asc' , 'agedesc':'sort-desc' }[sorttableparam]" ng-click="sortby('age')"> <div>age</div> </th> </tr> </thead> </table> 2.

second - hide thead in main table , wrap table div tag,which processing directive:

<div style="height:300px" ng-scrollbar rebuild-on="rebuild:me" class="scrollme"> <table ng-table="tableparams" show-filter="true" class="table"> <thead><tr><th ></th><th ></th></tr></thead> <tbody > <tr ng-repeat="user in $data"> <td data-title="'name'" filter="{ 'name': 'text' }" sortable="name"> {{user.name}} </td> <td data-title="'age'" sortable="age"> {{user.age}} </td> </tr> </tbody> </table> </div> 3.

clicks header trigger reloading info sorting option,by binding sortby function

var sorting = $scope.tableparams.$params.sorting; var dir = sorting != null ? (sorting[param.tostring()] == 'asc' ? 'desc' : 'asc') : 'asc'; var sort={}; sort[param.tostring()]=dir; $scope.tableparams.sorting(sort); //edit classes in header rows imaging(check plunk) updatesorting(param); };

angularjs scrollbar ngtable