My current project involves managing a model containing nested arrays that represent different sections of a floor plan. Each section contains an array of booth objects. To optimize user interaction, I've created a view that displays all the booths on a grid and enables users to edit each booth's data by clicking on its icon, which opens an Angular UI modal. However, I'm facing a challenge in associating the edited booth with the correct section and booth model when it comes time to save the changes. Can someone provide guidance on how to tackle this issue effectively?
Below is an excerpt from my code.
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 = {
// Section and booth data here
};
});
var EditBoothCtrl = function ($scope, $modalInstance, boothData) {
// Controller logic for editing booth data
};
Detailed markup for the section view can be found below:
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>
Markup for the modal used to edit booth information:
modal.html
<div>
// Modal content here
</div>