0
這是一個任務控制面板動態內容的多模態對話框，您可以在地圖上的任務指標和（理論上）可以從彈出窗口內的按鈕 打開每個任務的細節。所有是動態的，從json創建，所以有很多標記作爲json數組內的對象，許多任務細節，如在json detalis等。從JSON
我有2個json文件，我使用。一個用於任務popoup是在cicle用於創建標記，彈出窗口和按鈕「missioni.json」。等一個「infomissione.json」每個任務的詳細信息（在我的項目，我想連接兩個JSON：使命與細節與公共密鑰鱈魚型的任務和使命的代碼）。
我已經過目標，知道，就是創建動態彈出窗口，並從它的按鈕模式對話框打開。
我想是與corrispondent任務描述動態地改變每個模式對話框的內容
注意：這裏有HTML代碼，更加深了有劇本，所有的庫從CDN加載，除了標記的圖像（你可以用別人取代它在「missioni.json」）我的style.css（don'think是非常重要的）和兩個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"}
]
}
我的任務控制面板：
感謝格式更好:) – Kenzo