ng-repeat finish event not working after sorting

Question

I'm using JQuery date-picker with angularJS. I'm setting date-picker in ng-repeat finish event. but if sorted order got changed then i need to re-initialize the date picker but ng-repeat finish event not firing. HTML code:

<table ng-table="defaultWHTable" id="border-table" class="table table-hover">
    <thead>
    <tr>
        <th class="text-center" style="position: relative; width: 126px;">
            <div ng-click="sortType = 'storeId'; sortReverse = !sortReverse">
                Store ID
                <span class="glyphicon sort-icon" ng-show="sortType=='storeId'" ng-class="{'glyphicon-chevron-up':sortReverse,'glyphicon-chevron-down':!sortReverse}"></span>
            </div>
        </th>
        <th class="text-center" style="position: relative; width: 136px;">
            <div ng-click="sortType = 'storeName'; sortReverse = !sortReverse">
                Store Name
                <span class="glyphicon sort-icon" ng-show="sortType=='storeName'" ng-class="{'glyphicon-chevron-up':sortReverse,'glyphicon-chevron-down':!sortReverse}"></span>
            </div>
        </th>
        <th class="text-center" style="position: relative; width: 220px;">
            <div ng-click="sortType = 'stockingPointId'; sortReverse = !sortReverse">
                Store Default Warehouse<span class="mandatory">*</span>
                <span class="glyphicon sort-icon" ng-show="sortType=='stockingPointId'" ng-class="{'glyphicon-chevron-up':sortReverse,'glyphicon-chevron-down':!sortReverse}"></span>
            </div>
        </th>
        <th class="text-center" style="position: relative; width: 216px;">
            <div>
                Start Date Hidded<span class="mandatory">*</span></span>
            </div>
        </th>
        <th class="text-center" style="position: relative; width: 216px;">
            <div ng-click="sortType = 'startDateH'; sortReverse = !sortReverse">
                Start Date<span class="mandatory">*</span>
                <span class="glyphicon sort-icon" ng-show="sortType=='startDateH'" ng-class="{'glyphicon-chevron-up':sortReverse,'glyphicon-chevron-down':!sortReverse}"></span>
            </div>
        </th>
        <th class="text-center" style="position: relative; width: 123px;">Delete</th>
        <th class="text-center" style="position: relative; width: 123px;">Apply<br><label class="select-all"><input id="select-all" type="checkbox" ng-click="selectAll()"  ng-disabled="disableBtn" autocomplete="off"> Select All</label></th>
        <th class="text-center" >Add Row </th> 
        </tr>
    </thead>
    <tbody ng-cloak>
        <tr ng-repeat="row in tableData | orderBy:sortType:sortReverse "  on-finish-render="invokDatePicker">
            <td id="itemid-{{$index}}"  style ="width: 142px;">{{ row.storeId }}</td>
            <td id="storeName-{{$index}}" style ="width: 150px;">{{ row.storeName }}</td>
            <td style ="width: 225px;">
                <select id="warehouse-{{$index}}" ng-change="valueChanged()" data-ng-model="row.stockingPointId" ng-options="wh.stockingPointId as wh.stockingPointName for wh in row.defaultWHList" style="width: 180px;"></select>
            </td>
            <td style="display:none"><input type="hidden" ng-model="row.rowId" value="{{row.rowId}}" ></td>
            <td align="center" style ="width: 229px;">{{row.startDateH | date:'d-MM-yyyy' }}</td>
            <td align="center" style ="width: 229px;"><input type="text" class="datepicker" ng-change="dateChange($index, row)"  id="sartDate-{{$index}}" ng-model="row.startDate" readonly="readonly" style="cursor: default"></td>
            <td style="display:none"><input type="hidden" ng-model="row.hiddenStartDate" value="{{row.hiddenStartDate}}" ></td>
            <td align="center" style ="width: 140px;"><input id="delete-{{$index}}" type="checkbox" ng-model="row.delete" ng-click="deleteRow($index, row)"/></td>
            <td align="center" style ="width: 140px;"><input id="apply-{{$index}}" type="checkbox" ng-model="row.apply" ng-click="addorremove($index, row)"/></td>
            <td align="center" style ="width: 140px;"><input type="image" id="myimage" class="add_btn" src="${pageContext.request.contextPath}/resources/images/add_btn.jpg" style="width: 22px;" ng-click="addNewRow($index, row)"/></td>
        </tr>
    </tbody>
</table>

JS file:

$scope.search = function () {
  $scope.Stores = [{"storeId":"S2000","storeName":"Minneapolis Store","defaultWHList":[{"stockingPointName":"N American Import WH","stockingPointNo":"W1000","stockingPointId":1},{"stockingPointName":"Store Supply","stockingPointNo":"W10001","stockingPointId":2},{"stockingPointName":"Investment Buy","stockingPointNo":"W10002","stockingPointId":3},{"stockingPointName":"Direct","stockingPointNo":"W10003","stockingPointId":4},{"stockingPointName":"testChamber","stockingPointNo":"00101","stockingPointId":21}],"defaultWH":"21","startDateH":"2011-06-11", "startDate":"11-06-2011","hiddenStartDate":"26/02/2016","endDate":null,"operation":null,"rowId":"AAAn+qAANAAALyvAAX","stockingPointId":21,"storeNo":57,"updatedBy":null,"timeStamp":null},{"storeId":"S2000","storeName":"Minneapolis Store","defaultWHList":[{"stockingPointName":"N American Import WH","stockingPointNo":"W1000","stockingPointId":1},{"stockingPointName":"Store Supply","stockingPointNo":"W10001","stockingPointId":2},{"stockingPointName":"Investment Buy","stockingPointNo":"W10002","stockingPointId":3},{"stockingPointName":"Direct","stockingPointNo":"W10003","stockingPointId":4},{"stockingPointName":"testChamber","stockingPointNo":"00101","stockingPointId":21}],"defaultWH":"1","startDateH":"2011-03-12","startDate":"12-03-2011","hiddenStartDate":"30/03/2016","endDate":null,"operation":null,"rowId":"AAAn+qAANAAALyvAAG","stockingPointId":1,"storeNo":57,"updatedBy":null,"timeStamp":null},{"storeId":"S6000","storeName":"Oceania Outlet","defaultWHList":[{"stockingPointName":"N American Import WH","stockingPointNo":"W1000","stockingPointId":1},{"stockingPointName":"Store Supply","stockingPointNo":"W10001","stockingPointId":2},{"stockingPointName":"Investment Buy","stockingPointNo":"W10002","stockingPointId":3},{"stockingPointName":"Direct","stockingPointNo":"W10003","stockingPointId":4},{"stockingPointName":"testChamber","stockingPointNo":"00101","stockingPointId":21}],"defaultWH":"3","startDateH":"2011-07-13","startDate":"13-07-2011","hiddenStartDate":"28/04/2016","endDate":null,"operation":null,"rowId":"AAAn+qAANAAALyvAAa","stockingPointId":3,"storeNo":58,"updatedBy":null,"timeStamp":null}];
  $scope.tableData = $scope.Stores;
  $scope.disableBtn = false;
}
$scope.$on('invokDatePicker', function(ngRepeatFinishedEvent) {
 for(i=0;  i < $scope.tableData.length; i++ ){
  $("#sartDate-"+i).datepicker("destroy");
  $( "#sartDate-"+i ).datepicker({ 
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    onClose: function (dateText, inst) {
      function isDonePressed() {
        return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
      }
      if (isDonePressed()) {
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).datepicker('setDate', new Date(year, month, 1)).trigger('change');
        $('.date-picker').focusout() //Added to remove focus from datepicker input box on selecting date
      }
    },
    minDate: 0  
  });
 }
});

Directive code:

myapp.directive('onFinishRender', function ($timeout) {
  return {
    restrict: 'A',
    link: function (scope, element, attr) {
      $timeout(function () {
          scope.$emit(attr.onFinishRender);
      });
    }
  }
});

After sorting date-picker is not working properly.JSFiddle. With out sorting it working fine. How can i call onFinishRender.

score 1 · Answer 1 · edited May 23 '17 at 11:59

1

What you are trying to do is not valid.

The directive onFinishRender fires when it is bind to the element and not when it is really finish sorting.

But that is not why its not working. Its not working because you are using $emit and not $broadcast .

Take a look at this link to understand the differences more clearly.

Replay comment: may be try to sort the array before you pass it to the dom

angular.module('app').controller('myController',function($filter){
   var arr = [] // huge array
   $scope.sort = function(sortType){
     scope.data = $filter('orderBy')(arr , sortType, true);
   }
   $scope.sort('default');

})

Now, as i see in you fiddle code, you can use the ng-click on the header to call a sort function as an angular expression

edited May 23 '17 at 11:59

Community

1
1

answered Mar 08 '16 at 09:53

Zamboney

2,002
12
22

when i changed to scope.$broadcast(attr.onFinishRender); then date picker its self not working. – Rajesh Narravula Mar 08 '16 at 10:20
remove the `onFinshRender` attribute and use `onChange` attribute instated – Zamboney Mar 08 '16 at 10:28
No my list huge. more than 20000 records will come. each change i can't call. – Rajesh Narravula Mar 08 '16 at 10:57
Not this is not working. same like fiddle output only coming. – Rajesh Narravula Mar 09 '16 at 06:43

score 0 · Answer 2 · answered Mar 08 '16 at 10:03

0

A little bit on the side that pattern won't do worse than your directive

myapp.run(['$scope','$timeout', function($scope,$timeout) {
  $timeout(function () {
    $scope.$broadcast("domIsReady");
  });
}]);

Try it yourself and I would like to hear your feedback

answered Mar 08 '16 at 10:03

kidwon

4,448
5
28
45

Error: [$injector:unpr] http://errors.angularjs.org/1.4.8/$injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope – Rajesh Narravula Mar 08 '16 at 10:13

score 0 · Accepted Answer · answered Mar 09 '16 at 09:24

I used AngularJS directive this issue is solved. Date picker TD is below:

 <td align="center" style ="width: 229px;"><input type="text" class="datepicker" ng-change="dateChange($index, row)" datepicker ng-model="row.startDate" readonly="readonly" style="cursor: default"></td>

Directive Code:

.directive("datepicker", function () {
    return {
        restrict: "A",
        link: function (scope, el, attr) {
            el.datepicker({
              dateFormat: 'dd/mm/yy'
            });
        }
    };
})

ng-repeat finish event not working after sorting

3 Answers3

Linked