我有一个模型，其中包含与平面图部分相对应的嵌套数组。平面图的每个部分内都有一系列展位对象。假设我有一个在网格上显示所有展位的数据 View ，允许用户单击展位图标(从而生成 Angular UI 模式)并编辑该展位的数据。问题是，当用户保存更新的展位信息时，我不确定如何将所选展位模型与适当的部分以及该部分中正确的展位模型相关联。有人可以帮我指出正确的方向吗？
这是我的代码。
boothManager.js
var boothManager = angular.module("boothManager", ["ui.bootstrap"]);
boothManager.controller("BoothManagerCtrl", function ($scope, $modal, $log) {
$scope.open = function (booth) {
var modalInstance = $modal.open({
templateUrl: '../../templates/edit_booth.html',
controller: "EditBoothCtrl",
backdrop: true,
size: "sm",
resolve: {
boothData: function () {
return booth;
}
}
});
modalInstance.result.then(function (boothData) {
console.log(boothData);
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.viewModel = {
"sections": [
{
"id": "String",
"name": "String",
"booths": [
{
"number": 1,
"fee": 30000,
"width": "10",
"length": "10",
"xPosition": 100,
"yPosition": 100,
"type": "String",
"label": "String",
"radius": 15
},
{
"number": "2",
"fee": 30000,
"width": "20",
"length": "20",
"xPosition": 132,
"yPosition": 100,
"type": "String",
"label": "String",
"radius": 15
},
{
"number": "3",
"fee": 30000,
"width": "10",
"length": "10",
"xPosition": 164,
"yPosition": 100,
"type": "String",
"label": "String",
"radius": 15
},
{
"number": "4",
"fee": 30000,
"width": "10",
"length": "10",
"xPosition": 196,
"yPosition": 100,
"type": "String",
"label": "String",
"radius": 15
},
{
"number": "5",
"fee": 30000,
"width": "10",
"length": "10",
"xPosition": 228,
"yPosition": 100,
"type": "String",
"label": "String",
"radius": 15
}
]
},
{
"id": "String",
"name": "String",
"booths": [
{
"number": "1",
"fee": 20000,
"width": "10",
"length": "10",
"xPosition": 100,
"yPosition": 132,
"textXPosition": 1,
"textYPosition": 1,
"type": "String",
"label": "String",
"radius": 15
},
{
"number": "2",
"fee": 20000,
"width": "20",
"length": "20",
"xPosition": 132,
"yPosition": 132,
"type": "String",
"label": "String",
"radius": 15
},
{
"number": "3",
"fee": 20000,
"width": "10",
"length": "10",
"xPosition": 164,
"yPosition": 132,
"type": "String",
"label": "String",
"radius": 15
},
{
"number": "4",
"fee": 20000,
"width": "10",
"length": "10",
"xPosition": 196,
"yPosition": 132,
"type": "String",
"label": "String",
"radius": 15
},
{
"number": "5",
"fee": 20000,
"width": "10",
"length": "10",
"xPosition": 228,
"yPosition": 132,
"type": "String",
"label": "String",
"radius": 15
}
]
},
{
"id": "String",
"name": "String",
"booths": [
{
"number": "1",
"fee": 10000,
"width": "10",
"length": "10",
"xPosition": 100,
"yPosition": 164,
"type": "String",
"label": "String",
"radius": 15
},
{
"number": "2",
"fee": 10000,
"width": "20",
"length": "20",
"xPosition": 132,
"yPosition": 164,
"type": "String",
"label": "String",
"radius": 15
},
{
"number": "3",
"fee": 10000,
"width": "10",
"length": "10",
"xPosition": 164,
"yPosition": 164,
"type": "String",
"label": "String",
"radius": 15
},
{
"number": "4",
"fee": 10000,
"width": "10",
"length": "10",
"xPosition": 196,
"yPosition": 164,
"type": "String",
"label": "String",
"radius": 15
},
{
"number": "5",
"fee": 10000,
"width": "10",
"length": "10",
"xPosition": 228,
"yPosition": 164,
"type": "String",
"label": "String",
"radius": 15
}
]
}
]
};
});
var EditBoothCtrl = function ($scope, $modalInstance, boothData) {
$scope.booth = angular.copy(boothData)
$scope.original = angular.extend($scope.booth);
$scope.ok = function () {
boothData = $scope.booth;
$modalInstance.close(boothData);
};
$scope.cancel = function () {
$scope.booth = angular.copy($scope.original);
$modalInstance.close();
};
};
这是我的剖面 View 标记的简化副本:
boothManager.html
<div ng-app="boothManager" ng-controller="BoothManagerCtrl" ngCloak>
<div ng-repeat="section in viewModel.sections">
<div ng-repeat="booth in section.booths" ng-click="open(booth)">
</div>
</div>
</div>
这是我的模态标记:
模态.html
<div>
<!--<script type="text/ng-template" id="edit_booth.html">-->
<div class="modal-header">
<h3 class="modal-title">Booth info</h3>
</div>
<div class="modal-body">
<form name="editBoothForm">
<input placeholder="label" ng-model="booth.label" />
<input placeholder="Width" ng-model="booth.width" />
<input placeholder="Length" ng-model="booth.length" />
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">Save</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
<!-- </script>-->
</div>
最佳答案
如果是我，我会将更多信息传递到传递到模态 Controller 的模型中。可以直接传入Section对象，而各个展位对象则通过其在数组中的索引来标识:
// here, we pass in index number, and the owning section
$scope.open = function (booth, index, section) {
var modalInstance = $modal.open({
templateUrl: '../../templates/edit_booth.html',
controller: "EditBoothCtrl",
backdrop: true,
size: "sm",
resolve: {
boothData: function () {
// pass along these info into the object you inject
// into your modal controller
data = {
index: index,
section: section
};
return angular.copy(booth, data);
}
}
});
modalInstance.result.then(function (boothData) {
// here bootData.index and bootData.section exists
bootData.section.booths[bootData.index] = bootData;
// cleaning up since we no longer need them
delete bootData.index;
delete bootData.section;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
然后，在您的ng-repeat中:
<div ng-repeat="section in viewModel.sections">
<div ng-repeat="booth in section.booths" ng-click="open(booth, $index, section)">
</div>
</div>
关于javascript - 通过 Angular UI 模式更新复杂模型时遇到问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24479410/