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>

这是我模态的标记：

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>

Answer 1

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

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

无法通过Angular UI模式更新复杂模型

1 个答案: