Angular Modal-更新UI(对象已移动到其他日期)

Angular Modal - Update the UI (object has moved to another date)

本文关键字:移动 其他 日期 对象 Modal- 更新 UI Angular      更新时间:2023-09-26

我正在使用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

OP中的代码破坏了模型(scope.WorkCentres)。每个函数都有一个不进行的角度
 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;
                            }
                        })
                    }
                })                
            }

我可能真的会因为高兴而哭!