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