在AngularJS中的同一HTML页面上显示不同的数据

Question

我在AngularJS中创建了一个完全像这样的网站： http ：//www.aboveandbeyond.nu

网站上有一个页面，我正在使用ng-repeat显示链接列表，我正在从JSON文件中获取数据。 我想要的是当有人点击特定链接时，我需要在链接的新页面上显示一组特定数据。 作为参考，您可以查看此页面的功能： http ： //www.aboveandbeyond.nu/abgt

我不能使用路由，因为有很多链接，我不想分别为每个链接创建新页面，因此路由不是一个可行的选择。 我还能做些什么来实现这个目标？

编辑1：

这是显示播客列表的代码的一部分：

<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>

这是控制器内部的JSON数据（它是一个示例数据）：

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:'#'}
];});

但最终我会从这个地方获取信息：

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

感谢您的帮助谢谢

Answer 1

使用动态路由的力量。

使用$ stateProvider的示例：

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

动态路由是惊人的，但很难单独在stackoverflow上解释它。

如果您想构建任何使用API​​来获取信息的Web应用程序，那么您必须要考虑这些问题。

基本上，动态路由允许您从动态URL获取参数，例如/ artist /：name，您可以从url获取：name参数。

然后，使用您从URL获取的：name参数，您可以从JSON文件，数据库或您正在使用的任何内容中获取该艺术家，并根据该URL显示相关信息。