Angularjs Display data from json file in list format using ng-repeat and when we click on list items, show the corresponding data in the right side:
index.html:
<!DOCTYPE html>
<!-- AngularJS Simple JSON Load and List -->
<!-- Define this as an AngularJS app -->
<html ng-app>
<head>
<!-- Don't forget to load angularjs! -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<!-- Our application/controller definitions -->
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Link this DOM object to the ArtistsController in app.js -->
<div ng-controller="ArtistsController">
<div class="floatingbox list">
<p> Click an artist/band name below:</p>
<ul>
<!-- Iterate through all artists creating anchor tabs with ng-click
directives that will call ArtistsController's setSelectedArtist
function and pass it the clicked artist object. The function will
update selectedArtist which will cause the detail to fill in below. -->
<li ng-repeat="artist in artists">
<a href ng-click='setSelectedArtist(artist)'>{{artist.artistName}}</a></li>
</li>
</ul>
</div>
<!-- This section will automatically display detail when selectedArtist is updated -->
<div class="floatingbox detail">
<!-- <div class="detailimagewrapper">
<img class="detailimage" src="{{selectedArtistImage}}" >
</div> -->
<p>{{selectedArtist.description}}</p>
</div>
</div>
</body>
</html>
app.js:
function ArtistsController($scope, $http) {
// IMAGE_ROOT = "http://rabidgadfly.com/assets/angular/dataload/";
// DEFAULT_IMAGE = "blank.gif";
$scope.selectedArtist = "";
//$scope.selectedArtistImage = IMAGE_ROOT + DEFAULT_IMAGE;
$http.get('artists.json').success(function(data) {
$scope.artists = data;
});
$scope.setSelectedArtist = function(artist) {
$scope.selectedArtist = artist;
/* if( artist.image ) {
$scope.selectedArtistImage = IMAGE_ROOT + artist.image;
} else {
$scope.selectedArtistImage = IMAGE_ROOT + DEFAULT_IMAGE;
} */
};
}
artists.json:
[
{
"artistId":1,
"artistName":"AC/DC",
"genre":"Rock",
"image":"acdc.jpg",
"description":"AC/DC are an Australian hard rock band, formed in 1973 by brothers Malcolm and Angus Young. To date they are one of the highest-grossing bands of all time."
},
{
"artistId":2,
"artistName":"Aerosmith",
"genre":"Rock",
"image":"aerosmith.jpg",
"description":"Aerosmith is an American blues-based rock band. The band was formed in Boston, Massachusetts in 1970 by guitarist Joe Perry, bassist Tom Hamilton, singer Steven Tyler, and drummer Joey Kramer. In 1971, guitarist Brad Whitford joined the band and they began developing a following."
},
{
"artistId":3,
"artistName":"James Taylor",
"genre":"Easy Listening",
"image":"jt.jpg",
"description":"James Taylor is an American singer-songwriter and guitarist. A five-time Grammy Award winner, Taylor was inducted into the Rock & Roll Hall of Fame in 2000."
},
{
"artistId":4,
"artistName":"Buddy Guy",
"genre":"Blues",
"image":"buddyguy.jpg",
"description":"George 'Buddy' Guy is an American blues guitarist and singer. He is a pioneer of the Chicago blues sound and has served as an influence to Eric Clapton, Jimi Hendrix and Stevie Ray Vaughan, among others."
},
{
"artistId":5,
"artistName":"Johny Cash",
"genre":"Country",
"image":"johnnycash.jpg",
"description":"Johnny Cash was an American singer-songwriter, actor, and author, who has been called one of the most influential musicians of the 20th century. While primarily remembered as a country music icon, his songs and sound spanned many other genres including rockabilly, rock and roll, blues, folk, and gospel."
}
]
style.css:
body {
font: 11pt Helvetica,Arial;
width:600px;
background: #333;
}
ul {
list-style: none;
padding:0;
}
input {
font-size: 10pt;
}
.sectiontitle {
color:red;
text-align: right;
width:100%;
}
.inputfield {
color:blue;
}
.floatingbox {
float:left;
border: 1px solid #333;
border-radius: 8px;
background-color: #fff;
margin:5px;
padding:5px;
}
.list {
width:200px;
}
.detail {
width:275px;
}
.detailimagewrapper {
text-align: center;
}
.detailimage {
box-shadow: 5px 5px 5px #888888;
border-radius: 8px;
}
output:
when ever we click on the left side list items the data in the right side is updated , the data is coming from the json file.
index.html:
<!DOCTYPE html>
<!-- AngularJS Simple JSON Load and List -->
<!-- Define this as an AngularJS app -->
<html ng-app>
<head>
<!-- Don't forget to load angularjs! -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<!-- Our application/controller definitions -->
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Link this DOM object to the ArtistsController in app.js -->
<div ng-controller="ArtistsController">
<div class="floatingbox list">
<p> Click an artist/band name below:</p>
<ul>
<!-- Iterate through all artists creating anchor tabs with ng-click
directives that will call ArtistsController's setSelectedArtist
function and pass it the clicked artist object. The function will
update selectedArtist which will cause the detail to fill in below. -->
<li ng-repeat="artist in artists">
<a href ng-click='setSelectedArtist(artist)'>{{artist.artistName}}</a></li>
</li>
</ul>
</div>
<!-- This section will automatically display detail when selectedArtist is updated -->
<div class="floatingbox detail">
<!-- <div class="detailimagewrapper">
<img class="detailimage" src="{{selectedArtistImage}}" >
</div> -->
<p>{{selectedArtist.description}}</p>
</div>
</div>
</body>
</html>
app.js:
function ArtistsController($scope, $http) {
// IMAGE_ROOT = "http://rabidgadfly.com/assets/angular/dataload/";
// DEFAULT_IMAGE = "blank.gif";
$scope.selectedArtist = "";
//$scope.selectedArtistImage = IMAGE_ROOT + DEFAULT_IMAGE;
$http.get('artists.json').success(function(data) {
$scope.artists = data;
});
$scope.setSelectedArtist = function(artist) {
$scope.selectedArtist = artist;
/* if( artist.image ) {
$scope.selectedArtistImage = IMAGE_ROOT + artist.image;
} else {
$scope.selectedArtistImage = IMAGE_ROOT + DEFAULT_IMAGE;
} */
};
}
artists.json:
[
{
"artistId":1,
"artistName":"AC/DC",
"genre":"Rock",
"image":"acdc.jpg",
"description":"AC/DC are an Australian hard rock band, formed in 1973 by brothers Malcolm and Angus Young. To date they are one of the highest-grossing bands of all time."
},
{
"artistId":2,
"artistName":"Aerosmith",
"genre":"Rock",
"image":"aerosmith.jpg",
"description":"Aerosmith is an American blues-based rock band. The band was formed in Boston, Massachusetts in 1970 by guitarist Joe Perry, bassist Tom Hamilton, singer Steven Tyler, and drummer Joey Kramer. In 1971, guitarist Brad Whitford joined the band and they began developing a following."
},
{
"artistId":3,
"artistName":"James Taylor",
"genre":"Easy Listening",
"image":"jt.jpg",
"description":"James Taylor is an American singer-songwriter and guitarist. A five-time Grammy Award winner, Taylor was inducted into the Rock & Roll Hall of Fame in 2000."
},
{
"artistId":4,
"artistName":"Buddy Guy",
"genre":"Blues",
"image":"buddyguy.jpg",
"description":"George 'Buddy' Guy is an American blues guitarist and singer. He is a pioneer of the Chicago blues sound and has served as an influence to Eric Clapton, Jimi Hendrix and Stevie Ray Vaughan, among others."
},
{
"artistId":5,
"artistName":"Johny Cash",
"genre":"Country",
"image":"johnnycash.jpg",
"description":"Johnny Cash was an American singer-songwriter, actor, and author, who has been called one of the most influential musicians of the 20th century. While primarily remembered as a country music icon, his songs and sound spanned many other genres including rockabilly, rock and roll, blues, folk, and gospel."
}
]
body {
font: 11pt Helvetica,Arial;
width:600px;
background: #333;
}
ul {
list-style: none;
padding:0;
}
input {
font-size: 10pt;
}
.sectiontitle {
color:red;
text-align: right;
width:100%;
}
.inputfield {
color:blue;
}
.floatingbox {
float:left;
border: 1px solid #333;
border-radius: 8px;
background-color: #fff;
margin:5px;
padding:5px;
}
.list {
width:200px;
}
.detail {
width:275px;
}
.detailimagewrapper {
text-align: center;
}
.detailimage {
box-shadow: 5px 5px 5px #888888;
border-radius: 8px;
}
output:
when ever we click on the left side list items the data in the right side is updated , the data is coming from the json file.
No comments:
Post a Comment