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; 
    //... 
}