Twitter Bootstrap Question posted in

How to get json data into AngularJS modal dialog? – Twitter bootstrap

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

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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;
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search