Multiple Modal Dialogs with dynamic content from JSON
Question
This is a Mission Control Panel, you have the missions markers on the map and (theoretically) you can open the details of each mission from a button inside the popups. All is dynamic, created from json, so there are many markers as the objects inside the json array, many mission details as in json detalis etc.
I have 2 json file that i use. One for the missions popoup "missioni.json" that is used in a cicle to create markers, popups and the buttons. And other one "infomissione.json" with the details of each mission (in my project i wanna link the two json: the mission with the details with a common key cod-type of mission and code of mission ).
what i've already goal for know, is to create dynamic popups and open from it's buttons the modal dialogs.
what i want is to change dynamically the content of each modal dialog with the corrispondent mission description
NB: here there is the html code, more deep there is the script, all the libraries are loaded from cdn, except images of the markers (you can use others replacing it in the "missioni.json") my style.css(don'think is so important) and the two json file. i report the two json file down they have to stay in the root. I think it should run.
<!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>
here there are the json files
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"}
]
}
and
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"}
]
}
My Mission Control Panel:
1 answers
solution1
0 2016-02-26 12:22:08
You can pass the text you want exhibit to the modal controller
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
}
}
});
And in the modal controller you can inject into the scope and use it normally.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Making multiple accessible modal dialogs
Bootstrap Modal - same modal multiple open dialogs
Open modal from method in vuejs with dynamic content
angular ui-bootsrap multiple dialogs modal
Dojo multiple non-modal dialogs with dropdownbutton
jQuery UI switch focus on multiple modal dialogs?
Load modal content from JSON with Twitter Bootstrap
Use the same modal codes multiple times with dynamic content
Display dynamic content in Angular Modal from parent controller
How can I best manage multiple twitter bootstrap modal dialogs
Related Tags