Angular Modal-更新UI(对象已移动到其他日期)
Angular Modal - Update the UI (object has moved to another date)
我正在使用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
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;
}
})
}
})
}
我可能真的会因为高兴而哭!
相关文章:
- 如何检测移动到其他域页面
- HTML5 音频单击进度条可移动到其他时间
- 如果从我的网站在浏览器中安装了其他程序,如何在移动应用程序中打开共享对话框
- 当用户移动到其他页面时,如何显示AJAX调用结果
- Wordpress 移动导航菜单:菜单出现在 iPhone 和其他移动设备上,但不是 iPad
- 移动菜单需要 Jquery 2.0.1,但其他站点脚本需要旧版本
- 在益智游戏中,如何使可移动瓷砖的悬停为红色,而其他瓷砖保持原始状态
- 在移动其他元素时保存元素在画布中的位置
- 需要 iFrame 在滚动页面的其他部分时不移动
- 如何查找触摸移动到其他对象
- 引导下拉列表 - 移动其他内容
- 在鼠标移动其他元素时移动 svg 视口
- 如何在textField上使用zIndex,这样当我在Titanium中按下一步时,我可以移动到其他textField
- jquery show() 在 IE 7 中移动其他元素
- 除了通过JavaScript追加之外,还有其他方法可以将动态数据添加到jQuery移动页面中吗?
- 单击以关闭移动设备上的jQuery下拉菜单,同时保留其他行为
- 动画折叠移动其他元素
- 在谷歌图表中添加新行而不移动其他行
- 有没有一种方法可以将一个元素从二维数组内部移动到数组中的另一个位置,而不移动其他元素?
- 为firefox中的元素设置动画会移动其他元素