Infinite Dropdown Demo
this fiddle allows you to play with ad-infinite-dropdown directive
HTML
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.19/angular-sanitize.js"></script>
<script src="http://adaptv.github.io/adapt-strap/dist/adapt-strap.js"></script>
<script src="http://adaptv.github.io/adapt-strap/dist/adapt-strap.tpl.js"></script>
<link rel="stylesheet" href="http://adaptv.github.io/adapt-strap/dist/adapt-strap.css">
<div ng-app="adaptv.adaptStrapDocs" ng-controller="infiniteDropdownCtrl">
<!-- ========== template files ========== -->
<script type="text/ng-template" id="src/infinitedropdown/docs/artist.html">
<span>
<img ng-src="{{item.image[0]['#text']}}" />
<strong>{{ item.name }}</strong>
</span>
</script>
<script type="text/ng-template" id="src/infinitedropdown/docs/customSearch.html">
<div>
<input type="text" placeholder="search" ng-model="artistsAjaxConfig.params.artist"><br>
<a href=""
ng-click="deselectAllArtists()"
ng-show="selectedArtists.length">Deselect All ({{selectedArtists.length}})</a>
</div>
</script>
<div class="panel panel-default">
<div class="panel-body">
<h4 class="text-muted">Multi Selection Mode</h4>
<!-- ========== Usage Multi Select ========== -->
<ad-infinite-dropdown dropdown-name="artistsList"
display-property="name"
initial-label="Select an artist"
selected-items="selectedArtists"
max-height="150px"
max-width="200px"
dropdown-header-template-url="src/infinitedropdown/docs/customSearch.html"
ajax-config="artistsAjaxConfig">
</ad-infinite-dropdown>
<p>Selected Items:</p>
<span>
{{...
JavaScript
// ========== initialize documentation app module ========== //
angular.module('adaptv.adaptStrapDocs', [
'ngSanitize',
'adaptv.adaptStrap'
])
// ========== controllers ========== //
angular.module('adaptv.adaptStrapDocs')
.controller('infiniteDropdownCtrl', ['$scope',
function ($scope) {
// ========== Shared AJAX config Implementation ========== //
$scope.artistsAjaxConfig = {
url: 'http://ws.audioscrobbler.com/2.0/',
method: 'JSONP',
params: {
api_key: '9b0cdcf446cc96dea3e747787ad23575',
artist: '50 cent',
method: 'artist.search',
format: 'json'
},
paginationConfig: {
response: {
totalItems: 'results.opensearch:totalResults',
itemsLocation: 'results.artistmatches.artist'
}
}
};
$scope.artistClicked = function (artist) {
alert(artist.name);
};
$scope.deselectAllArtists = function () {
$scope.selectedArtists.length = 0;
};
$scope.selectedArtists = [];
$scope.selectedArtist = [];
$scope.artistListTemplate = '<em>{{ item.name }}</em>';
$scope.localSelectedArtists = [];
$scope.localArtistsData = [
{ 'name': '50 Cent' },
{ 'name': '50 Cent Feat. Justin Timberlake' },
{ 'name': 'Jeremih feat. 50 Cent' },
{ 'name': '50 Cent, Eminem, Ca$his & Lloyd Banks' },
{ 'name': 'Mann Feat. 50 Cent' },
{ 'name': '50 Cent feat. Mobb Deep' },
{ 'name': '50 Cent F. Justin Timberlake and Timbaland' },
{ 'name': 'Mobb Deep Feat. 50 Cent & Nate Dogg' },
{ 'name': '50 Cent feat. Justin Timberlake & Timbaland' },
{ 'name': '50 Cent Feat. Young Buck' },
{ 'name': '50 Cent Feat. Akon' },
{ 'name': 'Mobb Deep feat. 50 Cent' },
{ 'name': '50 Cent feat. Fergie' },
{ 'name': '50 Cent vs. Beyonce vs. Mary J. Blige' },
{ 'name': '50...