AngularJS在URL正下方显示列表

AngularJS display list right below the URL

本文关键字：下方显示 列表 URL AngularJS      更新时间：2023-09-26

所以我试图在点击它们的正下方的前端显示一个值列表。例如，假设我的前端有一个专辑列表：

album-name-1
album-name-2
album-name-3
当我单击专辑名称-1时，我需要专辑名称

-1的曲目显示在专辑名称-1的正下方。当我单击专辑名称 2 时，我不希望看到要显示的专辑名称-1，而只在专辑名称 2 下方显示专辑名称 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;
    })
}
}

任何线索如何实现这一目标？

我认为你应该有这样的标记

<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;
    //...
}
相关文章：