Question

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

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

当我点击album-name-1时，我需要将album-name-1的曲目显示在album-name-1的正下方。当我点击专辑名称2时，我不想看到要显示的专辑名称1，只显示专辑名称-2下面的专辑名称2的曲目，依此类推。如下所示：

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

或点击album-name-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;
    //...
}

AngularJS显示列表右下方的列表

1 个答案: