0

我正在使用带有 angularJS 的 JQuery 日期选择器。我在 ng-repeat 完成事件中设置日期选择器。但是如果排序顺序发生了变化，那么我需要重新初始化日期选择器，但 ng-repeat 完成事件不会触发。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>

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

指令代码：

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

排序日期选择器后无法正常工作。JSF中。没有排序它工作正常。我如何调用 onFinishRender。

4

3 回答 3

1

你试图做的事情是无效的。

onFinishRender指令在绑定到元素时触发，而不是在真正完成排序时触发。

但这不是它不起作用的原因。它不起作用，因为您正在使用$emit而不是$broadcast.

查看此链接以更清楚地了解差异。

重播评论：可能会在将数组传递给 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');

})

现在，正如我在您的小提琴代码中看到的那样，您可以使用ng-click标题上的 将sort函数作为角度表达式调用

于 2016-03-08T09:53:59.977 回答
0

稍微有点模式不会比你的指令更糟糕

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

自己尝试一下，我想听听您的反馈

于 2016-03-08T10:03:20.553 回答
0

我使用 AngularJS 指令解决了这个问题。日期选择器 TD 如下：

 <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("datepicker", function () {
    return {
        restrict: "A",
        link: function (scope, el, attr) {
            el.datepicker({
              dateFormat: 'dd/mm/yy'
            });
        }
    };
})
于 2016-03-09T09:24:41.203 回答