<html ng-app>
<head>
<title>Multiple Select Drop-Down List using AngularJS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
<script src="multiSelectCtrl.js" type="text/javascript"></script>
</head>
<body>
<div ng-controller="multiSelectCtrl">
<h3 class="title">Please select your favorite airlines:</h3>
<div class="multiple-select-wrapper">
<div class="selected-items-box">
<span class="dropdown-icon"></span>
<ul class="items-list">
<li ng-repeat="airline in Airlines | filter: getSelectedItemsOnly| limitTo: 3">
<img ng-src="{{airline.img}}" title="{{airline.name}}" alt="{{airline.name}}" />
</li>
<span ng-show="(Airlines | filter: getSelectedItemsOnly).length > 3" title="See more selections..">...</span>
</ul>
</div>
<div class="list">
<ul class="items-list">
<li ng-repeat="airline in Airlines">
<input type="checkbox" ng-model="airline.selected" />
<img ng-src="{{airline.img}}" title="{{airline.name}}" alt="{{airline.name}}" />
<span>{{airline.name}}</span>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
function multiSelectCtrl($scope){
$('.selected-items-box').bind('click', function(e){
e.stopPropagation();
$('.multiple-select-wrapper .list').toggle('slideDown');
});
$('.multiple-select-wrapper .list').bind('click', function(e){
e.stopPropagation();
});
$(document).bind('click', function(){
$('.multiple-select-wrapper .list').slideUp();
});
$scope.Airlines = [
{selected: false, name:'SWISS', img:'http://s9.postimage.org/d9t33we17/Swiss.png'},
{selected: false, name:'UNITED', img:'http://s9.postimage.org/ykqn85w5n/United.png'},
{selected: false, name:'KLM', img:'http://s9.postimage.org/p7unhshsb/Klm.png'},
{selected: false, name:'EL AL', img:'http://s18.postimage.org/oi8ndntud/image.gif'},
{selected: false, name:'Ethiopian', img:'http://s9.postimage.org/hqlg2ks97/image.gif'}
];
$scope.getSelectedItemsOnly = function(item){
return item.selected;
};
}
.multiple-select-wrapper {
width: 190px;
position: relative;
}
.multiple-select-wrapper .selected-items-box {
box-shadow: inset 1px -1px 5px 0 #CCCCCC;
-webkit-box-shadow: inset 1px -1px 5px 0 #CCCCCC;
-moz-box-shadow: inset 1px -1px 5px 0 #CCCCCC;
-o-box-shadow: inset 1px -1px 5px 0 #CCCCCC;
cursor: pointer;
border: solid 1px #C7C6C7;
padding: 5px;
height: 22px;
background-color: #fff;
border-radius: 5px;
-mox-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
}
.selected-items-box .items-list {
list-style-type: none;
width: 100%;
padding: 0;
margin: 0;
}
.selected-items-box .items-list li {
display: inline;
}
.selected-items-box .items-list li img {
display: inline;
padding-left: 10px;
height: 18px;
}
.selected-items-box .items-list li img {
font-size: 20px;
}
.multiple-select-wrapper .list {
display: none;
height: 90px;
overflow-y: auto;
overflow-x: hidden;
border-left: solid 1px #C7C6C7;
border-right: solid 1px #C7C6C7;
border-bottom: solid 1px #C7C6C7;
z-index: 9999;
position: absolute;
width: 99%;
border-radius: 5px;
-mox-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
}
.list .items-list {
list-style-type: none;
width: 100%;
padding: 0;
margin: 0;
}
.list .items-list li {
margin: 0;
width: 100%;
padding: 0;
border-bottom: solid 1px #C7C6C7;
padding: 5px;
background-color: #fff;
}
.list .items-list li input {
padding-left: 10px;
}
.list .items-list li img {
padding-left: 10px;
padding-right: 6px;
height: 18px;
}
.list .items-list li span {
color: #4A4A4A;
font-size: 14px;
}
.dropdown-icon {
position: absolute;
top: 50%;
right: 0;
margin-top: -8px;
width: 16px;
height: 16px;
background-image: url("http://s18.postimage.org/ht23xn8id/menu_arrow_down.png");
background-repeat: no-repeat;
background-position: 0 center;
}
.title {
color: white;
background-color:black;
}