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

这是 Controller 内部的 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 显示相关信息。