<!DOCTYPE html>
<html ng-app="App">
<head>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link data-require="bootstrap@3.3.6" data-semver="3.3.6" rel="stylesheet" href="bootstrap" />
<link data-require="font-awesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
<link rel="stylesheet" href="https://rawgit.com/rajush/angular-dropdown-multiselect/master/dist/angular-dropdownMultiselect.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.20" data-semver="1.3.20" src="https://code.angularjs.org/1.3.20/angular.js"></script>
<script src="https://rawgit.com/rajush/angular-dropdown-multiselect/master/dist/angular-dropdownMultiselect.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MyController">
<div class="container">
<a href="https://github.com/rajush/angular-dropdown-multiselect" target="_blank" class="title">Angular dropdown multiselect <i class="fa fa-github"></i></a>
<div style="margin-top: 25px;">
<dropdown-multiselect dropdown-config="config" model="selectedItems"></dropdown-multiselect>
</div>
<br>
<pre> Selected Items = {{selectedItems | json}} </pre>
</div>
</body>
</html>
angular.module( 'App', [ 'dropdown-multiselect' ] )
.controller("MyController", function($scope){
var options = [ {
'Id': 1,
'Name': 'Batman',
'Costume': 'Black',
'selected': true
}, {
'Id': 2,
'Name': 'Superman',
'Costume': 'Red & Blue'
}, {
'Id': 3,
'Name': 'Hulk',
'Costume': 'Green'
}, {
'Id': 4,
'Name': 'Flash',
'Costume': 'Red'
}, {
'Id': 5,
'Name': 'Dare-Devil',
'Costume': 'Maroon'
}, {
'Id': 6,
'Name': 'Wonder-woman',
'Costume': 'Red'
}];
$scope.config = {
options: options,
trackBy: 'Id',
displayBy: [ 'Name', 'Costume' ],
divider: ':',
icon: 'glyphicon glyphicon-heart',
displayBadge: true,
height: '200px',
filter: true,
multiSelect: true,
preSelectItem: true,
preSelectAll: false
};
});
/* Styles go here */
.title {
font-size: 30px;
}