javascriptangularjsjsonmodal-dialogng-dialog

How to get json data into AngularJS modal dialog?


I am trying to display json values on my modal using angularjs. But I am failing to display on modal dialog, but I can see those values on my console or on alert message. Please help me where I am doing wrong. Thanks in advance.

Created Plnkr.

html:

<!doctype html>
<html ng-app="myApp">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
    <script src="script.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>
<div ng-controller="TestCtrl">
    <button ng-click="test()">Test</button>
</div>
  </body>
</html>

script.js:

angular.module('myApp', ['ui.bootstrap']);
function TestCtrl($scope, $dialog, $http){
  $scope.test = function(){
     $http.get('test.json')
        .success(function(data) {
           $dialog.dialog({}).open('test.html');
            $scope.items=data;
            console.log(data);
            alert(JSON.stringify(data));
        });
 }
 }

test.html:

<div class="modal-header">
  <h1>Test Modal</h1>
</div>'
<div class="modal-body">
  Test Data:
    <ul ng-repeat="item in items">
    <li>
      {{item.test1}}
      {{item.test2}}
      {{item.test3}}
    </li>
  </ul>
</div>

test.json:

[{
    "test1": "test1value",
    "test2": "10",
    "test3": "100"
}]

Solution

  • it seems that you do not have visibility in your modal of that variable.

    try this, i've just fixed your plunker:

    // Code goes here
    
    var app = angular.module('myApp', ['ui.bootstrap']);
    
    function TestCtrl($scope, $dialog, $http){
      $scope.test = function(){
       // $dialog.dialog({}).open('modalContent.html');
    
        $http.get('test.json')
            .success(function(data) {
               $scope.items=data;
               console.log(data);
               alert(JSON.stringify(data));
               $dialog.dialog({
                 templateUrl:  'test.html',
                  controller: 'dialogCtrl',
                  resolve: { items: function () { return $scope.items; } }
               }).open('test.html');
    
            });
    
      }
    
    }
    
    app.controller('dialogCtrl', function ($scope, items) {
      $scope.items= items;
    });