Angular Footable仅显示选定的列数据

时间:2016-03-15 20:54:31

标签: javascript jquery angularjs

我想知道Footable中是否有一种方法只显示您选择的数据collen,并隐藏其他数据。

例如,让我们说以下是相册列表(我的足迹中的行)

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

如果我选择了专辑1,它的数据显示如下:

album-name-1

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

如果我选择了album2,则只会显示这些详细信息,并且相册1中之前展开的曲目会折叠如下:

album-name-1
album-name-2

track1
track2
track3
album-name-3

我使用angularJS来使用footable。有关如何实现这一目标的任何建议?就像我知道如果我没有使用像Footable这样的花哨的东西,我可以通过使用ng-click触发点击事件并传递索引来显示/隐藏我需要的内容来实现这一点。正如我之前提到的这个答案:AngularJS display list right below the URL

但是在这里,我正在尝试使用Footable插件。这是我的html代码段:

<table class="footable table table-stripped toggle-arrow-tiny" data-page-size="8">
                    <thead>
                    <tr>
                        <th data-toggle="all">Release Title</th>
                        <th data-toggle="all">Release Genre</th>
                        <th data-toggle="all">Classical</th>
                        <th data-hide="all">Tracks</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="album in vm.albums" footable>
                        <td ng-click="vm.editAlbum(album, $index)">{{album.data.title}}</small></td>
                        <td>{{album.data.genre}}</td>
                        <td ng-if!="album.data.classical">No</td>
                        <td ng-if="album.data.classical">Yes</td>
                        <td><br>
                            <li ng-repeat="track in album.data.tracks">
                                <a ng-click="vm.selectTrack(album, track)">{{track.title}}</a>
                            </li>
                        </td>
                    </tr>
                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="5">
                            <ul class="pagination pull-right"></ul>
                        </td>
                    </tr>
                    </tfoot>
</table>

0 个答案:

没有答案