通過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>