我正在使用Angular UI模式来更新日历样式网格UI。 (在拖放式应用上(使用http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types)),例如更改订单计划图的日期。
模式是提供手动更新方式,在用户点击“保存”按钮之前我无法保存。
这很好(虽然我怀疑它可能会更好)更新我的父作用域对象(scope.WokCentres)中的数据,即日期更改,很棒)。我坚持的是将对象“移动”到'日历样式网格'中的新日期 下面是我的JS并查看html
JS:
$scope.EditWorkOrder = function (slot, max) {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: '/app/WorkOrder/Views/EditWorkOrder.html',
controller: 'EditWorkOrderCtrl as vm',
size: 'lg',
resolve: {
data: function () {
return {
Slot: slot,
Max: max
}
}
}
});
//slotupdate is the returned object from the modal
modalInstance.result.then(function (slotupdate) {
for (var a = 0; a < scope.WorkCentres.length; a++) {
var wcs = scope.WorkCentres[a]
for (var b = 0; b < wcs.WorkOrderDates.length; b++) {
var wcd = wcs.WorkOrderDates[b]
for (var c = 0; c < wcd.PlanningSlots.length; c++) {
var slot = wcd.PlanningSlots[c]
if (slot.Id == slotupdate.Id) {
// This gets hit and updates the appropriate data object from the loop
scope.WorkCentres[a].WorkOrderDates[b].PlanningSlots[c] = slotupdate;
}
}
}
}
}, function () {
// do nothing
// $log.info('Modal dismissed at: ' + new Date());
});
};// END OF MODAL
查看:
<div ng-controller="workCentreCtrl as vm">
<div class="row">
<div class="workcentre-left">
<h3>Work Centre</h3>
</div>
<div class="workcentre-right">
<ul>
<li class="date-bar" ng-repeat="workdate in vm.WorkDates">{{workdate |date:'EEEE'}} {{workdate |date:'dd MMM'}}</li>
</ul>
</div>
</div>
<div>
<div class="row" ng-repeat="wc in vm.WorkCentres" ng-model="vm.WorkCentres">
<div class="workcentre-left">
<h5>{{wc.WorkCentreName}}</h5>
<button class="btn btn-default" ng-click="open(wc.WorkCentreId)" type="button">edit</button>
<p ng-if="wc.RouteTime != 0">{{wc.RouteTime}}</p>
</div>
<div class="workcentre-right dndBoxes">
<ul class="orderdate" ng-repeat="date in wc.WorkOrderDates" data-workdate="{{date.OrderDate}}">
<li id="parentorderdate" ng-class="{'four-slot': wc.max == 4, 'eight-slot': wc.max == 8, 'twelve-slot': wc.max == 12,'sixteen-slot': wc.max == 16}">
<ul dnd-list="date.PlanningSlots"
dnd-allowed-types="wc.allowedTypes"
dnd-disable-if="date.PlanningSlots.length >= wc.max"
dnd-dragover="dragoverCallback(event, index, external, type)"
dnd-drop="dropCallback(event, index, item, external, type, 'itemType')"
dnd-inserted="logEvent('Element was inserted at position ' + index, event)">
<li ng-repeat="slot in date.PlanningSlots" ng-model="date.PlanningSlots" ng-if="slot.WorkOrderNumber != '' "
dnd-draggable="slot"
dnd-type="wc.allowedTypes"
dnd-moved="date.PlanningSlots.splice($index, 1)"
dnd-effect-allowed="move" class="slot {{slot.css}}" title="{{slot.WOStatus}}">
<div>{{slot.SlotNumber}}</div>
<div>{{slot.WorkOrderNumber}} - {{slot.ProductDescription}}</div>
<div ng-if="slot.WOStatus != ''"><span class="float-right fa fa-edit fa-2x main-text edit-work-order" ng-click="EditWorkOrder(slot, wc.max)"></span></div>
</li>
<li ng-repeat="slot in date.PlanningSlots" ng-model="date.PlanningSlots" ng-if="slot.SlotBlocked == 'true'"
class="empty-slot">{{slot.SlotBlocked}}
<i class="fa fa-ban fa-2x main-text"></i>
</li>
<li class="dndPlaceholder">Drop work order here
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
任何帮助很多人都赞赏。 itsdanny
答案 0 :(得分:0)
OP中的代码打破了模型(scope.WorkCentres)。 有一个angular.forEach函数,它没有
modalInstance.result.then(function (slotupdate) {
// Remove it
angular.forEach(scope.WorkCentres, function (wc) {
angular.forEach(wc.WorkOrderDates, function (WorkOrderDate) {
angular.forEach(WorkOrderDate.PlanningSlots, function (slot) {
if (slot.Id == slotupdate.Id) {
WorkOrderDate.PlanningSlots.splice(index, 1);
}
})
})
})
// Add it back
angular.forEach(scope.WorkCentres, function (wc) {
if (wc.WorkCentreId == slotupdate.WorkCentreId) {
angular.forEach(wc.WorkOrderDates, function (WorkOrderDate) {
if (WorkOrderDate.OrderDate == slotupdate.OrderDate.getTime()) {
WorkOrderDate.PlanningSlots.push(slotupdate)
return;
}
})
}
})
}
我可能真的会因为欢乐而哭泣!