Display different data on same HTML page in AngularJS

Question

I'm making a website in AngularJS exactly like this one: http://www.aboveandbeyond.nu

There is a page in the website where I'm displaying a list of links using ng-repeat, I'm taking the data from a JSON file. What I want is when somebody clicks on a particular link I need to display a particular set of data on a new page respective to the link. For reference you may check the functionality of this page: http://www.aboveandbeyond.nu/abgt

I can not do this using Routing because there are a lot of links and I dont want to create new page for each link separately, so routing is not a feasible option. What else can I do to achieve this?

EDIT 1:

this is a part of the code which displays the list of podcast:

<div id="track-list" ng-repeat="track in tracks | filter:search | orderBy: '-date'">
        <a ng-href="#/radio"><h3 class="track-list-title">{{track.title}}</h3></a>
        <p class="track-list-date">{{track.date | date}}</p>
</div>

this is the JSON data inside of a controller (it is a sample data):

mainApp.controller('podcastController', function($scope) {
$scope.pageClass = 'page page-podcast';
$scope.tracks =[
    {title:'Group Therapy 156 with Above & Beyond and Maor Levi', date: new Date(), link:'#'},
    {title:'Group Therapy 156 with Above & Beyond and Maor Levi', date: new Date(), link:'#'},
    {title:'Group Therapy 156 with Above & Beyond and Maor Levi', date: new Date(), link:'#'},
    {title:'Group Therapy 156 with Above & Beyond and Maor Levi', date: new Date(), link:'#'},
    {title:'Group Therapy 156 with Above & Beyond and Maor Levi', date: new Date(), link:'#'},
    {title:'Group Therapy 156 with Above & Beyond and Maor Levi', date: new Date(), link:'#'},
    {title:'Group Therapy 156 with Above & Beyond and Maor Levi', date: new Date(), link:'#'},
    {title:'Group Therapy 156 with Above & Beyond and Maor Levi', date: new Date(), link:'#'},
    {title:'Group Therapy 156 with Above & Beyond and Maor Levi', date: new Date(), link:'#'},
    {title:'Group Therapy 156 with Above & Beyond and Maor Levi', date: new Date(), link:'#'},
    {title:'Group Therapy 156 with Above & Beyond and Maor Levi', date: new Date(), link:'#'}
];});

but ultimately i will ahve to fetch info from this place:

http://musichighcourt.com/soundcloudapp/play_life/podcast/get_podcast.php

Your help is appreciated Thank you

Nick Snick · Accepted Answer · 2015-12-06 10:17:41Z

3

Use the power of dynamic routing.

example using $stateProvider:

$stateProvider
.state('artist.detail', {
    url: "/artist/:contactId",
    templateUrl: 'artist.detail.html',
    controller: <controller-name>
})

Dynamic routing is amazing but it's hard to be able to explain it on stackoverflow alone.

It's something you have to look into if you want to build any kind of web application that uses API's to fetch information.

Basically, dynamic routing allows you to get parameters from the dynamic url like /artist/:name where you can get the :name parameter from the url.

Then, using the :name parameter you got from the url, you can fetch the artist out of the JSON file, database or whatever you're using and display relative information based on the url.

answered Dec 6, 2015 at 10:17

Nick Snick

9311 gold badge9 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jeff Over a year ago

You might want to add the mark-up to show him how to use it.

ANshul Sharma Over a year ago

@Jyeon I have added the ng-repeat code and the JSON data I'm using in the question above now.

ANshul Sharma Over a year ago

Hi Nick, Could you please look at my code above and explain with a small example?

Nick Snick Over a year ago

@ANshulSharma Here's a quick & easy video showing how dynamic routing works in angularJS: youtube.com/watch?v=ziUelciLL5Q , There's to much involved in making a dynamic route, it truly is a concept that you have to grasp thoroughly, not only with angular but also with express routing etc. Hope this helps Anshul!

Collectives™ on Stack Overflow

Display different data on same HTML page in AngularJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related