NG-重复完成事件在排序后不起作用
ng-repeat finish event not working after sorting
我正在使用带有angularJS的JQuery日期选择器。我正在 ng 重复完成事件中设置日期选择器。但是,如果排序顺序发生了变化,那么我需要重新初始化日期选择器,但 ng-repeat 完成事件不会触发。网页代码:
<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);
});
}
}
});
排序后,日期选择器无法正常工作。JSFiddle.没有排序,它工作正常。如何调用 onFinishRender。
您尝试执行的操作无效。
指令 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
函数作为角度表达式调用
稍微
偏一点,这种模式不会比你的指令差
myapp.run(['$scope','$timeout', function($scope,$timeout) {
$timeout(function () {
$scope.$broadcast("domIsReady");
});
}]);
自己尝试一下,我想听听您的反馈
我使用了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'
});
}
};
})
相关文章:
- jquery中DataTables插件中的排序不起作用
- j查询排序不起作用
- 为什么这种 jquery 驱动的表排序不起作用
- jQuery DataTables排序不起作用
- populate中的Mongoose排序不起作用
- 使用J-query数据表,美国日期格式的自定义排序不起作用
- jQuery 表排序器排序不起作用
- 从 AJAX 调用的 PHP 对数组进行排序不起作用
- Jquery UI 可排序不起作用
- 基于CSS类和文本对元素进行排序不起作用
- 使用嵌套json时,ngTable中的排序不起作用
- js文档排序不起作用
- jQueryDataTables-当日期也是一个链接时,排序不起作用
- angularJS:动态标题排序不起作用
- ng表排序不起作用
- 淘汰排序不起作用
- SlickGrid:重新排序后的排序不起作用
- 数据表排序不起作用
- 数组排序不起作用
- jqgrid:动态添加记录后排序不起作用