javascript - 从数组对象索引中获取与用户单击的相册名称相对应的图像

Question

我会尝试尽可能彻底地解释这一点。我需要做的是在对象内部的图像数组上使用 ng-repeat ，该对象也位于数组内部。主数组中的对象数量是包含用户创建的图像的相册的数量。

因此，当用户单击 h1 时:

<ul>
    <li ng-repeat="album in albumsList"> <!-- albumsList in the main array -->
        <a href="#/Albums/view-album">
            <h1 ng-bind="album.albumName"></h1> <!-- takes you to the view-album view -->
        </a>
        <img src="{{album.images.imageList[0]}}"> <!-- thumbnail -->
    </li>
</ul>

它路由到 view-album View ，其中应显示该相册的所有图像。

在这里，我对“winter”相册进行了硬编码，以便ng-repeat显示该相册的所有图像:

<ul>
    <li ng-repeat="image in albumsList[1].images.imageList">
        <img src="{{image}}">
    </li>
</ul>

显然这不是我想要的。我需要以某种方式将用户单击的内容与主数组中正确对象的 albumName 相匹配。我该怎么做？

包含信息的数组具有以下结构:

imageList 包含所有图像。

我的路线:

flickrApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/home', {
            templateUrl: 'templates/feed.php',
            controller: 'flickrCtrl'
        }).
        when('/Albums', {
            templateUrl: 'templates/albums.php',
            controller: 'albumsCtrl'
        }).
        when('/Albums/view-album', {
            templateUrl: 'templates/view-album.php',
            controller: 'albumsCtrl'
        }).
        otherwise({
            redirectTo: '/home'
        });
}]);

Answer 1

在路由中，您可以将查看相册路由更改为 /Albums/:albumName 并且最好使用单独的 Controller :

.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/home', {
            templateUrl: 'templates/feed.php',
            controller: 'flickrCtrl'
        }).
        when('/Albums', {
            templateUrl: 'templates/albums.php',
            controller: 'albumsCtrl'
        }).
        when('/Albums/:albumName', {
            templateUrl: 'templates/view-album.php',
            controller: 'viewAlbumsCtrl'
        }).
        otherwise({
            redirectTo: '/home'
        });
}]);

然后在您看来，您可以像这样传递专辑名称:

<a ng-href="#/Albums/{{album.albumName}}">
    <h1 ng-bind="album.albumName"></h1> <!-- takes you to the view-album view -->
</a>

然后要从 URL 中获取专辑名称，请使用 $routeParams.albumName。然后可以使用它按名称查找专辑:

.controller('viewAlbumsCtrl', function($scope, $routeParams) {
  $scope.albumName = $routeParams.albumName;
})

Plunkr