How to get json data into AngularJS modal dialog?

Question

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

Karim · Accepted Answer · 2016-07-21 12:43:17Z

2

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;
});

edited Jul 21, 2016 at 12:43

answered Jul 21, 2016 at 10:09

Karim

8,6823 gold badges27 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dhana Over a year ago

thanks for your reply, can you please edit in my Plnkr, as I am getting errors.

Dhana Over a year ago

thanks for your reply, yes it is working fine. Thanks for your help once again !

Dhana Over a year ago

I have one query that, I have applied like above in my application, but I can see the json values on my console(in <div class="modal ng-scope>), but modal pop-up is not showing on my page on clicking of button, I am not sure why ? May I know any reason ? I am using angular 1.2.4 !

Rajesh Dixit · Accepted Answer · 2016-07-21 11:21:27Z

1

Issue is your scope variable is not accessible in test.html.

I just updated your variable to rootScope and its working fine not.

Updated Plunker

Note: This is a patch work and not a proper implementation. @Karim's answer, looks more like a proper implementation and should be considered as answer if it works for you.

edited Jul 21, 2016 at 11:21

answered Jul 21, 2016 at 10:09

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

6 Comments

Dhana Over a year ago

Thanks for your reply, yes it is working fine too ! Thanks once again for help !!

Dhana Over a year ago

@Karim's answer is also working fine now. You both saved me ! Thanks !

Rajesh Dixit Over a year ago

I guess you should try to understand the real issue(scopeing). rootScope is not bad it's just in your situation, is not appropriate. And I'm glad was able to help you.

Dhana Over a year ago

I have one query that, I have applied like above in my application, but I can see the json values on my console(in <div class="modal ng-scope>), but modal pop-up is not showing on my page on clicking of button, I am not sure why ? May I know any reason ? I am using angular 1.2.4 !

Rajesh Dixit Over a year ago

@Dhana as I have already said, its a scoping issue. You are trying to access something that is defined in other scope. You will either have to define it at a higher scope(my solution) or share scope(Karim's answer)

|

Collectives™ on Stack Overflow

How to get json data into AngularJS modal dialog?

2 Answers 2

3 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related