排序后NG重复完成的事件不工作 [英] ng-repeat finish event not working after sorting
本文介绍了排序后NG重复完成的事件不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用jQuery日期选择器与angularJS。我设置日期选择在NG-重复完成的事件。但是，如果的排序顺序得到了改变，然后我需要重新初始化日期选择器，但NG重复完成的事件不触发。
HTML code：
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文件：
$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：
myapp.directive('onFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
$timeout(function () {
scope.$emit(attr.onFinishRender);
});
}
}
});
排序日期选择器后不能正常工作。的jsfiddle 。随着整理出它做工精细。
我怎么能叫onFinishRender。
After sorting date-picker is not working properly.JSFiddle. With out sorting it working fine. How can i call onFinishRender.
推荐答案
我用AngularJS指令这个问题就解决了。
日期选择器TD是如下：
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>
指令code：
.directive("datepicker", function () {
return {
restrict: "A",
link: function (scope, el, attr) {
el.datepicker({
dateFormat: 'dd/mm/yy'
});
}
};
})
这篇关于排序后NG重复完成的事件不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
