<ul class="dropdowns"> <li class="dropdown" ng-class="{'has-filter': query.filters.trackTypes.selectedArray.length}"> <a class="dropdown-toggle btn btn-default" bs-dropdown> Type: <strong>{{query.filters.trackTypes.title}}</strong> </a> <a class="btn btn-default" pfm-eat-click ng-click="clearFilter('trackTypes')"><i class="fa fa-remove"></i></a> <ul class="dropdown-menu"> <li ng-repeat="type in ::filters.trackTypes.values track by type.id" ng-class="{selected: query.isIdSelected('trackTypes', type.id)}" > <a class="dont-close" pfm-eat-click href="#" ng-click="toggleListFilter('trackTypes', type.id); $event.stopPropagation();"><i class="fa fa-plus"></i></a> <a pfm-eat-click href="#" ng-click="setListFilter('trackTypes', type.id);">{{::type.title}}</a> </li> </ul> </li> <li class="dropdown" ng-class="{'has-filter': query.filters.showSongs.selectedArray.length}"> <a class="dropdown-toggle btn btn-default" bs-dropdown> Show Songs: <strong>{{query.filters.showSongs.title}}</strong> </a> <a class="btn btn-default" pfm-eat-click ng-click="clearFilter('showSongs')"><i class="fa fa-remove"></i></a> <ul class="dropdown-menu"> <li ng-repeat="song in ::filters.showSongs.values track by song.id" ng-class="{selected: query.isIdSelected('showSongs', song.id)}" > <a class="dont-close" pfm-eat-click href="#" ng-click="toggleListFilter('showSongs', song.id); $event.stopPropagation();"><i class="fa fa-plus"></i></a> <a pfm-eat-click href="#" ng-click="setListFilter('showSongs', song.id);">{{::song.title}}</a> </li> </ul> </li> <li class="dropdown" ng-class="{'has-filter': query.filters.genres.selectedArray.length}"> <a class="dropdown-toggle btn btn-default" bs-dropdown> Genre: <strong>{{query.filters.genres.title}}</strong> </a> <a class="btn btn-default" pfm-eat-click ng-click="clearFilter('genres')"><i class="fa fa-remove"></i></a> <ul class="dropdown-menu"> <li ng-repeat="genre in ::filters.genres.values track by genre.id" ng-class="{selected: query.isIdSelected('genres', genre.id)}"> <a class="dont-close" pfm-eat-click href="#" ng-click="toggleListFilter('genres', genre.id); $event.stopPropagation();"><i class="fa fa-plus"></i></a> <a pfm-eat-click href="#" ng-click="setListFilter('genres', genre.id);">{{::genre.title}}</a> </li> </ul> </li> <li class="dropdown" ng-class="{'has-filter': !query.filters.isVocal.isDefault}"> <a class="dropdown-toggle btn btn-default" bs-dropdown> Is Vocal: <strong>{{query.filters.isVocal.title}}</strong> </a> <a class="btn btn-default" pfm-eat-click ng-click="clearFilter('isVocal')"><i class="fa fa-remove"></i></a> <ul class="dropdown-menu"> <li ng-repeat="item in ::filters.isVocal.values track by $index" ng-class="{selected: item == query.filters.isVocal}" > <a pfm-eat-click href="#" ng-click="setFilter('isVocal', item);">{{::item.title}}</a> </li> </ul> </li> <li class="dropdown" ng-class="{'has-filter': !query.filters.sort.isDefault}"> <a class="dropdown-toggle btn btn-default" bs-dropdown> Order: <strong>{{query.filters.sort.title}}</strong> </a> <a class="btn btn-default" pfm-eat-click ng-click="clearFilter('sort')"><i class="fa fa-remove"></i></a> <ul class="dropdown-menu"> <li ng-repeat="filter in ::filters.sort.values track by $index" ng-class="{selected: filter == query.filters.sort}"> <a pfm-eat-click href="#" ng-click="setFilter('sort', filter)">{{::filter.title}}</a> </li> </ul> </li> <li class="dropdown" ng-class="{'has-filter': !query.filters.archive.isDefault}"> <a class="dropdown-toggle btn btn-default" bs-dropdown> Archive: <strong>{{query.filters.archive.title}}</strong> </a> <a class="btn btn-default" pfm-eat-click ng-click="clearFilter('archive')"><i class="fa fa-remove"></i></a> <ul class="dropdown-menu"> <li ng-repeat="filter in ::filters.archive.values track by $index" ng-class="{selected: filter == query.filters.archive}"> <a pfm-eat-click href="#" ng-click="setFilter('archive', filter)">{{::filter.title}}</a> </li> </ul> </li> </ul> <div class="pagination" ng-if="totalPages > 1"> <ul> <li ng-class="{disabled: !prevPage}"><a href="#" ng-click="gotoPage(prevPage);" pfm-eat-click>Prev</a></li> <li ng-repeat="page in pages track by page" ng-class="{active: page == currentPage}"> <a href="#" ng-click="gotoPage(page);" pfm-eat-click>{{page}}</a> </li> <li ng-class="{disabled: !nextPage}"><a href="#" ng-click="gotoPage(nextPage);" pfm-eat-click>Next</a></li> <li class="pagination-jump"> <a href="#" ng-click="showPageSelector();" ng-hide="pageSelectorShown" pfm-eat-click>Jump…</a> <form ng-submit="jumpToPage(inputPageNumber)" ng-show="pageSelectorShown"> <input type="number" id="pagination-jump-destination" ng-model="inputPageNumber" ng-blur="hidePageSelector()" /> <input type="submit" /> </form> </li> </ul> </div> <ui-view></ui-view>