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('js/jsondataexample2json.json').success(function (data) {
$scope.myData = data;
});
});
</script>
</head>
<body>
<div ng-app="myApp" id="ng-app" ng-controller="MyCtrl">
<div ng-repeat="post in myData" >
<h2>
<a href='{{post.name}}'>{{post.age}}</a>
</h2>
<div class='time'>{{post.time}} - {{post.author}} </div>
<p>{{post.description}}</p>
<img ng-src="{{post.banner}}" width="100px" height="100px"/>
</div>
</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"
}]
output:
<!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('js/jsondataexample2json.json').success(function (data) {
$scope.myData = data;
});
});
</script>
</head>
<body>
<div ng-app="myApp" id="ng-app" ng-controller="MyCtrl">
<div ng-repeat="post in myData" >
<h2>
<a href='{{post.name}}'>{{post.age}}</a>
</h2>
<div class='time'>{{post.time}} - {{post.author}} </div>
<p>{{post.description}}</p>
<img ng-src="{{post.banner}}" width="100px" height="100px"/>
</div>
</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"
}]
output:
Tuesday, August 6, 2013 - Srinivas Tamada
Some Tesxt
No comments:
Post a Comment