下面的网址AngularJS显示列表右侧 [英] AngularJS display list right below the URL

问题描述

所以我想显示在前端值下方他们正在单击的位置列表。例如，可以说我的前端有专辑列表：

So I am trying to display a list of values on the front end right below where they are clicked. For instance, lets say my front end has a list of albums:

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

当我点击专辑名称-1，我需要专辑名称-1的轨道下方专辑名称-1显示。当我点击专辑名称2，我不希望看到专辑名-1中显示，只显示专辑名称-2以下专辑名称-2等曲目。如下所示：

When I click album-name-1 I need the tracks of album-name-1 to be displayed right below album-name-1. When I click album-name 2, I don't want to see album-name-1 to be shown and only display the tracks for album-name-2 below album-name-2 and so on. Like the following:

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

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

or when I click album-name-2:

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

现在，用我的code，当我点击任何一张专辑的，它会显示每一张专辑下方的曲目，即使他们不属于该专辑，如：

Right now, with my code, when I click any album, it displays the tracks below every album even if they don't belong to that album like:

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

下面是我的HTML code：

Here is my HTML code:

<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;
    })
}

}

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

Any clue how to achieve that ?

推荐答案

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

I think you should have markup like this

<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

In function controller, assign property vm.showingAlbumIndex

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

这篇关于下面的网址AngularJS显示列表右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！