J'utilise JQuery date-picker avec angularJS. Je mets le sélecteur de date dans l'événement de fin de répétition ng. mais si l'ordre trié a changé, j'ai besoin de réinitialiser le sélecteur de date, mais l'événement de fin ng-repeat ne se déclenche pas. Code HTML:

<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>

Fichier JS:

$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  
  });
 }
});

Code de la directive:

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

Après le tri, le sélecteur de date ne fonctionne pas correctement. JSFiddle. Sans le trier, cela fonctionne bien. Comment puis-je appeler onFinishRender.

0
Rajesh Narravula 8 mars 2016 à 12:43

3 réponses

Meilleure réponse

J'ai utilisé la directive AngularJS, ce problème est résolu. Le sélecteur de date TD est ci-dessous:

 <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>

Code de la directive:

.directive("datepicker", function () {
    return {
        restrict: "A",
        link: function (scope, el, attr) {
            el.datepicker({
              dateFormat: 'dd/mm/yy'
            });
        }
    };
})
0
Rajesh Narravula 9 mars 2016 à 09:24

Ce que vous essayez de faire n'est pas valide.

La directive onFinishRender se déclenche lorsqu'elle est liée à l'élément et non lorsqu'elle a vraiment terminé le tri.

Mais ce n'est pas pourquoi cela ne fonctionne pas. Cela ne fonctionne pas car vous utilisez $emit et non $broadcast.

Jetez un œil à ce lien pour mieux comprendre les différences.

Commentaire: essayez de trier le tableau avant de le transmettre au 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');

})

Maintenant, comme je le vois dans votre code de violon, vous pouvez utiliser le ng-click sur l'en-tête pour appeler une fonction sort comme une expression angulaire

1
Community 23 mai 2017 à 11:59

Un peu sur le côté, ce modèle ne fera pas pire que votre directive

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

Essayez-le vous-même et j'aimerais entendre vos commentaires

0
kidwon 8 mars 2016 à 10:03