从用户点击的相册名称对应的数组对象索引中获取图片

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 视图，该视图应显示该相册的所有图像。

我在这里对 "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，最好使用单独的控制器：

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

然后使用 $routeParams.albumName 从 url 中获取相册名称。然后可以使用它来按名称查找相册：

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

Plunkr

从用户点击的相册名称对应的数组对象索引中获取图片

Get the images from the array object index that corresponds with the album name of what the user clicked

javascript

arrays

object

angularjs

ng-repeat