Javascript 通过角度UI模式更新复杂模型时出现问题

我有一个模型，其中嵌套阵列对应于楼层平面的各个部分。在楼层平面的每个部分中都有一组展台对象。假设我有一个数据视图，显示网格上的所有展位，允许用户单击展位图标（从而生成角度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>

以下是我的模态标记：

modal.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>

展位信息
拯救
取消

如果是我，我会将更多的信息传递到模型中，然后传递到模态控制器中。Section对象可以直接传入，而单个booth对象由数组中的its索引标识：

// 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中重复
：

  <div ng-repeat="section in viewModel.sections">
      <div ng-repeat="booth in section.booths" ng-click="open(booth, $index, section)">
      </div>
  </div>


听起来像是某种范围界定问题，在plunk（）中放入一个最小复制场景，您很快就会得到答案。当然，我不得不调整一些变量，但最终非常准确。谢谢！确实如此。