通过Angular UI模式更新复杂模型时遇到问题

Question

我有一个嵌套数组对应于平面图部分的模型。在每个平面图的部分内是一系列展台对象。假设我有一个显示网格上所有展位的数据视图，允许用户点击一个展位图标（从而生成一个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(); 
    }; 

}; 

这里是我的部分观点的标记的简单化向下副本：

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> 

Answer 1

如果是我，我会将更多的信息传递给传递给模态控制器的模型。第对象可以直接通过，而个别展位对象是由它在数组中的索引标识：

// 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>