AngularJS显示列表正好在URL下面

Question

所以我试图在它们被点击的地方下方的前端显示一个值列表。举例来说，可以说我的前端有专辑列表：

album-name-1 
album-name-2 
album-name-3 

当我点击专辑名称-1，我需要专辑名称-1的轨道下方专辑名称-1显示。当我点击album-name-2时，我不想看到album-name-1显示，只显示album-name-2下面的album-name-2的曲目，等等。像下面这样：

album-name-1 
    - track1 
    - track2 
    - track3 
album-name-2 
album-name-3 

，或者当我点击专辑名称-2：

album-name-1 
album-name-2 
    - track1 
    - track2 
    - track3 
album-name-3 

现在，我的代码，当我点击任何专辑，它显示的每一张专辑，即使下面的轨道他们不属于该专辑，如：

album-name-1 
    - track1 
    - track2 
    - track3 
album-name-2 
    - track1 
    - track2 
    - track3 
album-name-3 
    - track1 
    - track2 
    - track3 

这里是我的HTML代码：

<div class="wrapper wrapper-content"> 
hello! 
<div> 
    <ul ng-repeat="album in vm.albums"> 
     <li><a ng-click="vm.getAlbumTracks(album)">{{album}}</a></li> 
     <ul ng-repeat="track in vm.albums.tracks"> 
      <li><a ng-click="vm.displayForm(track)">{{track}}</a></li> 
     </ul> 
    </ul> 
    <a ng-click="vm.newFunction('RAVI')">Click Me!</a> 
</div> 

这里是我的控制器：

FileUploadFormController.$inject = ['$http', '$log', '$scope', '$rootScope', 'APP_CONFIG']; 
function FileUploadFormController ($http, $log, $scope, $rootScope, APP_CONFIG){ 

var vm = this; 
vm.albums = init; 
vm.albums.tracks = getAlbumTracks; 
vm.newFunction = newFunction; 

return init(); 
function init(){ 
$http.get('http://localhost:8080/api/albums').then(function(responseData){ 
     // Parse the json data here and display it in the UI 
     $scope.vm.albums = responseData.data; 
     $log.debug(angular.toJson(responseData, true)); 

//    console.log(vm.albums.tracks); 
     return vm.albums; 
    }) 
} 

function getAlbumTracks(album, $scope){ 
    $http.get('http://localhost:8080/api/albums/'+album).success(function(trackResponse){ 
     //parse each album and get the track list 
     $scope.vm.albums.tracks = vm.albums.tracks.concat(trackResponse); 
     return vm.albums.tracks; 
    }) 
} 

} 

任何线索如何做到这一点？

Answer 1

我想你应该有类似这样的标记

<ul> 
    <li ng-repeat="album in vm.albums"> 
     <a ng-click="vm.getAlbumTracks(album, $index);">{{album}}</a> 
     <ul ng-show="$index === vm.showingAlbumIndex"> 
      <li ng-repeat="track in vm.albums.tracks"><a ng-click="vm.displayForm(track)">{{track}}</a></li> 
     </ul> 
    </li> 
</ul> 
<a ng-click="vm.newFunction('RAVI')">Click Me!</a> 

在功能控制器，转让财产vm.showingAlbumIndex

function getAlbumTracks(album, index){ 
    vm.showingAlbumIndex = index; 
    //... 
}