html:
<!doctype html>
<html lang="en" >
<head>
<title>Page Title</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope,$http) {
$http.get('jsondataexample2json.json').success(function (data) {
$scope.myData = data;
});
});
</script>
</head>
<body>
<div ng-app="myApp" id="ng-app" ng-controller="MyCtrl">
<h2>
<a href='{{myData.name}}'>{{myData.age}}</a>
</h2>
<div class='time'>{{myData.time}} - {{myData.author}} </div>
<p>{{myData.description}}</p>
<img ng-src="{{myData.banner}}" width="100px" height="100px"/>
</div>
</body>
</html>
json:
{
"title":"Multiple Ajax Image Upload without Refreshing Page using Jquery.",
"url":"http://www.9lessons.info/2013/08/multiple-ajax-image-upload-refreshing.html",
"banner":"http://i1.sndcdn.com/artworks-000065821197-xh0k21-original.jpg?d53bf9f",
"description":"Some Tesxt",
"time":"Tuesday, August 6, 2013" ,
"author":"Srinivas Tamada"
}
Note: json data is in object format that's why, we are not used the ng-repeat.
if the above json data is put inside the array i.e [{}], we may not get the ouput for above program.
output:
Tuesday, August 6, 2013 - Srinivas Tamada
Some Tesxt
No comments:
Post a Comment