具有来自JSON的动态内容的多个模式对话框
[英]Multiple Modal Dialogs with dynamic content from JSON
问题描述
这是一个任务控制面板，您在地图上具有任务标记，并且（理论上）您可以从弹出窗口中的按钮打开每个任务的详细信息。 所有内容都是动态的，是从json创建的，因此json数组中的对象有很多标记，在json detalis中有很多任务详细信息，等等。
我有2个使用的json文件。 一个用于任务弹出窗口“ missioni.json”的任务，该弹出窗口用于在cicle中创建标记，弹出窗口和按钮。 还有另一个“ infomissione.json”，其中包含每个任务的详细信息（在我的项目中，我想将两个json链接：具有详细信息的任务（具有共同的关键编码类型的任务和任务代码）。
我已经知道的目标是创建动态弹出窗口，并从其按钮中打开模式对话框。
我想要的是通过相应的任务描述动态更改每个模式对话框的内容
注意：这里有html代码，更深的是脚本，所有库都是从cdn加载的，除了标记的图像（您可以在“ missioni.json”中使用其他图像代替）我的style.css（don '思维是如此重要）和两个json文件。 我报告了两个json文件，它们必须保留在根目录中。 我认为它应该运行。
<!DOCTYPE HTML>
<html>
<head>
<!-- link for load Bootstrap css (cdn) -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- link for load personalized style, style.css (local) -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
<!-- fav icon (local) -->
<link rel="icon" href="images/armystar.png"></link>
<!-- Script for load AngularJS (cdn) -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!-- Script for load WebGL Earth (cdn) -->
<script src="http://www.webglearth.com/v2/api.js"></script>
<!-- Script for load JQuery (cdn) -->
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<!-- Script for load Bootstrap js (cdn) -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Script for load Angular-animate js (cdn) -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.js"></script>
<!-- Script for load Bootstrap UI tpls js (cdn) -->
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.2.js"></script>
<title>MISSION CONTROL</title>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
<style>
#buttons {position: absolute; top:10px; left: 10px;}
</style>
</head>
<body>
<!-- ANGULAR JS NG-APP -->
<div ng-app="ui.bootstrap.demo" id="wrap">
<!-- HEADER -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h1 class="h1-army">mission control</h1>
</div>
</div>
</div>
<!-- CONTENT -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-2"></div>
<div ng-controller="customersCtrl as ctrl">
<div class="col-xs-8"> <div id="earth_div"> </div></div>
<div id="ModalDCtrl" class="modal fade" ng-controller="ModalDemoCtrl" id="boxinfo2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">MISSION DETAILS</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
<!-- <button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
<button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button>
<button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button> -->
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div> <!-- COLLAPSE MODAL CONTROLLER -->
</div> <!-- COLLAPSE PRINCIPAL CONTROLLER -->
<div class="col-xs-2"></div>
</div> <!-- COLLAPSE ROW -->
</div> <!-- COLLAPSE MAP CONTAINER -->
</div> <!-- CLOSING AngularJs NG-APP -->
<!-- ------------------------- -->
<!-- FOOTER -->
<nav class="navbar navbar-default navbar-fixed-bottom footer">
<div class="container-fluid">
<p class="p-secret">{top secret}</p>
</div>
</nav>
<!-- --------------------------------------------------------------------------------------------------------
SCRIPT FOR WEBGL EARTH MAP AND MODAL WINDOWS INSIDE MAP'S POPUPS
------------------------------------------------------------------------------------------------------------- -->
<script>
var app = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log, $http ) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
// Please note that $uibModalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
app.controller('customersCtrl', function($scope, $http) {
vm = this;
$http.get("missioni.json")
.success(function (response) {
vm.missioni = response.missioni;
var earth = new WE.map('earth_div');
WE.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(earth); var marker = "";
//alert(vm.names.length);
function kenzo() {
alert("I am an alert box!");
}
angular.forEach(vm.missioni, function(value , key){
f(key + ': ' + value.no);
marker = WE.marker([value.lat, value.long],value.img, 48, 48).addTo(earth);
marker.bindPopup("<b class='list'> Mission Cod: </b><b class='p-mission'>" + value.codmis + "</b><br>" +
"<b class='list'> Mission Typecode: </b><b class='p-mission'>" + value.codtipo + "</b><br>" +
"<b class='list'> Mission Name: </b><b class='p-mission'>" + value.nome + "</b><br>" +
"<b class='list'> Mission info: </b>" +"<button type='button' class='btn btn-info btn-xs' onclick=\"openDiag()\">Apri</button>" + "<br>" +
"<b class='list'>Rating: </b><b class='p-mission'>" + value.rate + "</b><br>",
{/*maxWidth: 150,*/ closeButton: true})/*.openPopup()*/ ;
});
//var markerCustom = WE.marker([50, -9], '/img/logo-webglearth-white-100.png', 100, 24).addTo(earth);
earth.setView([38.341806,4.550849], 5);
earth.setTilt(0);
earth.setHeading(7);
});
$scope.info = function(){
$scope.showMe = false;
$http.get("infomissione.json").then(function(response){
$scope.myData = response.data.infomissione;
});
}
function f(x) {
//alert(x);
}
});
function openDiag() {
//alert("ok");
var scope = angular.element(document.getElementById("ModalDCtrl")).scope();
scope.$apply(function () {
scope.open('lg');
});
//angular.element(document.getElementById('ModalDCtrl')).scope().open
}
</script>
</body>
</html>
这里有json文件
missioni.json：
{
"missioni":
[
{"codmis":"10", "codtipo":"0001", "nome":"black-ops", "lat":"33.568488", "long":"-7.601811", "infobox":"<div ng-controller='ModalDemoCtrl'> <script type='text/ng-template' id='myModalContent.html'> <div class='modal-header'> <h3 class='modal-title'>I'm a modal!</h3> </div> <div class='modal-body'> <ul> <li ng-repeat='item in items'> <a href='#' ng-click='$event.preventDefault(); selected.item = item'>{{ item }}</a> </li> </ul> Selected: <b>{{ selected.item }}</b> </div> <div class='modal-footer'> <button class='btn btn-primary' type='button' ng-click='ok()'>OK</button> <button class='btn btn-warning' type='button' ng-click='cancel()'>Cancel</button> </div> </script> <button type='button' class='btn btn-default' ng-click='open()'>Open me!</button> <div ng-show='selected'>Selection from a modal: {{ selected }}</div> </div>", "rate":"3","img":"images/armygrade.png"},
{"codmis":"11", "codtipo":"0003", "nome":"snake-eater", "lat":"40.851367", "long":"14.267200", "infobox":"<div ng-controller='ModalDemoCtrl'> <script type='text/ng-template' id='myModalContent.html'> <div class='modal-header'> <h3 class='modal-title'>I'm a modal!</h3> </div> <div class='modal-body'> <ul> <li ng-repeat='item in items'> <a href='#' ng-click='$event.preventDefault(); selected.item = item'>{{ item }}</a> </li> </ul> Selected: <b>{{ selected.item }}</b> </div> <div class='modal-footer'> <button class='btn btn-primary' type='button' ng-click='ok()'>OK</button> <button class='btn btn-warning' type='button' ng-click='cancel()'>Cancel</button> </div> </script> <button type='button' class='btn btn-default' ng-click='open()'>Open me!</button> <div ng-show='selected'>Selection from a modal: {{ selected }}</div> </div>", "rate":"5","img":"images/armygrade2.png"},
{"codmis":"12", "codtipo":"0002", "nome":"phantom-pain", "lat":"34.560483", "long":"10.423815", "infobox":"<div ng-controller='ModalDemoCtrl'> <script type='text/ng-template' id='myModalContent.html'> <div class='modal-header'> <h3 class='modal-title'>I'm a modal!</h3> </div> <div class='modal-body'> <ul> <li ng-repeat='item in items'> <a href='#' ng-click='$event.preventDefault(); selected.item = item'>{{ item }}</a> </li> </ul> Selected: <b>{{ selected.item }}</b> </div> <div class='modal-footer'> <button class='btn btn-primary' type='button' ng-click='ok()'>OK</button> <button class='btn btn-warning' type='button' ng-click='cancel()'>Cancel</button> </div> </script> <button type='button' class='btn btn-default' ng-click='open()'>Open me!</button> <div ng-show='selected'>Selection from a modal: {{ selected }}</div> </div>", "rate":"5","img":"images/Marker48.png"}
]
}
和
infomissione.json
{
"infomissione":
[
{"codmis":"10", "codtipo":"0001", "nome":"black-ops", "rate":"3","descrizione":"descrizione della missione black-ops"},
{"codmis":"11", "codtipo":"0003", "nome":"snake-eater", "rate":"5","descrizione":"descrizione della missione snake-eater"},
{"codmis":"12", "codtipo":"0002", "nome":"phantom-pain","rate":"5","descrizione":"descrizione della missione phantom-pain"}
]
}
我的任务控制面板：
1 个解决方案
解决方案1
0 2016-02-26 12:22:08
您可以将要展示的文本传递给模态控制器
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
},
text: function() {
return text[i]; // this being the chosen modal text
}
}
});
在模态控制器中，您可以注入示波器并正常使用。
制作多个可访问的模式对话框
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.