具有来自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. 所有内容都是动态的，是从json创建的，因此json数组中的对象有很多标记，在json detalis中有很多任务详细信息，等等。
I have 2 json file that i use. 我有2个使用的json文件。 One for the missions popoup "missioni.json" that is used in a cicle to create markers, popups and the buttons. 一个用于任务弹出窗口“ missioni.json”的任务，该弹出窗口用于在cicle中创建标记，弹出窗口和按钮。 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 ). 还有另一个“ infomissione.json”，其中包含每个任务的详细信息（在我的项目中，我想将两个json链接：具有详细信息的任务（具有共同的关键编码类型的任务和任务代码）。
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. 注意：这里有html代码，更深的是脚本，所有库都是从cdn加载的，除了标记的图像（您可以在“ missioni.json”中使用其他图像代替）我的style.css（don '思维是如此重要）和两个json文件。 i report the two json file down they have to stay in the root. 我报告了两个json文件，它们必须保留在根目录中。 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 这里有json文件

missioni.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"}
  ]
}

and 和

infomissione.json 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: 我的任务控制面板：

Answer 1

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. 在模态控制器中，您可以注入示波器并正常使用。

具有来自JSON的动态内容的多个模式对话框

问题描述

1 个解决方案

解决方案1
0 2016-02-26 12:22:08

具有来自JSON的动态内容的多个模式对话框

问题描述

1 个解决方案

解决方案1 0 2016-02-26 12:22:08

解决方案1
0 2016-02-26 12:22:08