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

Question

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

4

我正在使用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

感谢您的帮助。谢谢。

- ANshul Sharma

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nick Kenens · Accepted Answer

利用动态路由的优势。

使用 $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显示相关信息。