通过Angular UI模态更新复杂模型时遇到麻烦
Trouble updating complex model via Angular UI modal
我有一个模型,其中嵌套数组对应于平面图的各个部分。在平面图的每个部分都有一系列的展台。假设我有一个数据视图,它在一个网格上显示了所有的展位,允许用户点击一个展位图标(从而生成一个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();
};
};
这是我的section视图标记的简化副本:
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对象可以直接传入,而单个展位对象则通过其在数组中的索引来标识:
// 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>
相关文章:
- 在VanillaJS中模拟模型双向数据绑定
- 将PHP变量传递给jQuery时遇到问题
- 我的jQuery插件参数没有正确启动,遇到了问题
- 为集合分配大量的模型弹药
- 如何使用backbone.js从集合中获取模型名称
- 骨干模型默认值-todos.js示例中不必要的代码
- EmberJS中支持单字母单词模型
- 2个backbone.js集合,具有相同的模型,但排序顺序不同
- 将不在模型中的数据返回到mvc控制器
- 如何在视图模型contet更新更新上调用Jquery函数
- 如何使用Javascript客户端对象模型检索Sharepoint 2010列表项权限
- 我应该如何检查主干.主干.模型更改时查看
- Ext.js从json构建模型关系的问题
- 使用 ng 模型获取数据时遇到问题
- 从 ko.computed 语句中的视图模型调用视图模型时遇到问题
- 将现有模型文件移动到Require.js中时遇到问题
- 通过Angular UI模态更新复杂模型时遇到麻烦
- BackboneJS,在保存模型时遇到成功和错误的问题
- 使用ngChange更新模型时遇到问题
- Ember JS -在用belongsTo关系加载多个模型到一个路由时遇到问题