Custom multiple select
JADE
body(ng-app="app")
.multiple-select-wrapper(ng-controller='MultiSelectController as ctrl')
button.multiple-select-input(ng-click='ctrl.toggleMultiSelect()' ng-class='{opened: ctrl.showMultiSelect}')
| Select columns to show
.multiple-select-options(ng-show='ctrl.showMultiSelect')
.multiple-select-option(ng-repeat='column in ctrl.columns')
input.option-input(type='checkbox' ng-model='column.selected')
span.option-label
| {{ column.name }}
i.fa.fa-check-square.option-selected
SCSS
$button-hover-color: #FAFAFA;
$white: #FFF;
$primary-color: #A475E4;
$secondary-color: #CCC;
* {
box-sizing: border-box;
outline: none;
}
.multiple-select-wrapper {
position: relative;
display: inline-block;
}
.multiple-select-input {
border: 1px solid $secondary-color;
background: $white;
padding: 10px 40px;
border-radius: 2px;
&:hover,
&.opened {
background: $button-hover-color;
border-color: $primary-color;
}
&::after {
content: '\f0d7';
font-family: 'FontAwesome';
position: absolute;
right: 10px;
}
}
.multiple-select-options {
position: absolute;
top: calc(100% + 2px);
background: $white;
width: 100%;
border-radius: 2px;
border: 1px solid $secondary-color;
overflow: hidden;
}
.multiple-select-option {
padding: 8px 20px;
position: relative;
&:not(:last-child) {
border-bottom: 1px solid $secondary-color;
}
&:hover {
color: $primary-color;
background: rgba($primary-color, 0.1);
&::before {
content: '';
width: 2px;
background: $primary-color;
height: 100%;
left: 0;
top: 0;
position: absolute;
}
}
}
.option-input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.option-selected {
position: absolute;
right: 10px;
color: $primary-color;
opacity: 0;
transition: 0.5s ease;
}
.option-input:checked ~ .option-label {
color: $primary-color;
}
.option-input:checked ~ .option-selected {
opacity: 1;
}
ES6
var app = angular.module('app', []).controller('MultiSelectController', [
function () {
this.showMultiSelect = false;
this.toggleMultiSelect = () => {
this.showMultiSelect = !this.showMultiSelect;
};
this.columns = [{
name: 'name'
}, {
name: 'email'
}, {
name: 'phone'
}, {
name: 'address'
}];
}
]);
