ScrollableMultiselectDropdownCheckboxes
angular scrollable multiselect dropdown with checkboxes.
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div ng-app="myApp" ng-controller="AppCtrl">
<dropdown-multiselect dropdown-title="Select Something" pre-selected="member.states" model="selected_items" options="states"></dropdown-multiselect> <pre>selected roles = {{selected_items | json}}</pre>
</div>
CSS
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
JavaScript
'use strict';
var app = angular.module('myApp', ['app.directives']);
app.controller('AppCtrl', function ($scope) {
$scope.states = [
{
"name": "Alabama",
"id": "AL"
},
{
"name": "Alaska",
"id": "AK"
},
{
"name": "American Samoa",
"id": "AS"
},
{
"name": "Arizona",
"id": "AZ"
},
{
"name": "Arkansas",
"id": "AR"
},
{
"name": "California",
"id": "CA"
},
{
"name": "Colorado",
"id": "CO"
},
{
"name": "Connecticut",
"id": "CT"
},
{
"name": "Delaware",
"id": "DE"
},
{
"name": "District Of Columbia",
"id": "DC"
},
{
"name": "Federated States Of Micronesia",
"id": "FM"
},
{
"name": "Florida",
"id": "FL"
},
{
"name": "Georgia",
"id": "GA"
},
{
"name": "Guam",
"id": "GU"
},
{
"name": "Hawaii",
"id": "HI"
},
{
"name": "Idaho",
"id": "ID"
},
{
"name": "Illinois",
"id": "IL"
},
{
"name": "Indiana",
"id": "IN"
},
{
"name": "Iowa",
"id": "IA"
},
{
"name": "Kansas",
"id": "KS"
},
{
"name": "Kentucky",
"id": "KY"
},
{
"name": "Louisiana",
"id": "LA"
},
{
"name": "Maine",
"id": "ME"
},
{
"name": "Marshall Islands",
"id": "MH"
},
{
"name": "Maryland",
"id": "MD"
},
{
"name": "Massachusetts",
"id": "MA"
},
{
"name": "Michigan",
"id": "MI"
},
{
"name": "Minnesota",
"id": "MN"
},
{
"name": "Mississippi",
"id": "MS"
},
{
"name": "Missouri",
"id": "MO"
},
{
...