多个模态对话框，包含来自JSON的动态内容

时间：2016-02-26 12:09:44

标签： javascript angularjs json modal-dialog

  • 这是一个任务控制面板，你在地图上有任务标记，并且（理论上）你可以从一个按钮打开每个任务的细节 在弹出窗口内。所有都是动态的，都是从json创建的，所以有很多标记作为json数组中的对象，许多任务细节都像json detalis等。

  • 我使用了2个json文件。一个用于任务popoup＆＃34; missioni.json＆＃34;在cicle中用于创建标记，弹出窗口和按钮。还有一个＆＃34; infomissione.json＆＃34;每个任务的详细信息（在我的项目中，我想将两个json联系起来：使用共同密钥鳕鱼类任务和任务代码的细节任务）。

  • 我已经知道的目标是创建动态弹出窗口并打开模式对话框中的按钮。

  • 我想要的是用相应的任务描述动态地改变每个模态对话框的内容

注意：这里有html代码，脚本更深，所有库都是从cdn加载的，除了标记的图像（你可以使用其他人替换它在＆＃34; missioni.json＆＃34 ;）我的style.css（不认为是如此重要）和两个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 个答案:

答案 0 :(得分：0)

您可以将要展示的文本传递给模态控制器

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
        }

      }
    });

在模态控制器中，您可以注入范围并正常使用它。

相关问题
最新问题