selectDown

by abenrob

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div ng-app="MyApp">
    <div class="container" ng-controller="MyController">
         <h4>SelectDown Directive</h4>

        <selectdown class="row col-xs-6" options="options" default-text='defaultText' on-select='action'></selectdown>
        <div class="well col-xs-8">
            <div ng-repeat="option in options | filter:!option.selected">
                <p>option name: {{option.name}}</p>
                <p>option value: {{option.value}}</p>
            </div>
        </div>
    </div>
</div>

CSS

selectdown {
    padding: 0
}
selectdown .select-group {
    z-index: 2000;
    position: relative;
    margin-bottom: 20px;
    padding: 0
}
selectdown .select-title {
    cursor: pointer;
    padding: 8px 15px;
    border: 1px solid lightgrey;
    background-color: white;
}
selectdown .select-title.open {
    border-bottom: 0;
}
selectdown .select-body {
    padding: 0;
    border: 1px solid lightgrey;
    border-top: 0;
    background-color: white;
    position: absolute;
    width: 100%;
}
selectdown .select-body p {
    cursor: pointer;
    padding: 8px 15px;
    margin: 0;
}
selectdown .select-body p:hover {
    background-color: #f0f0f0;
}
selectdown .drop-arrow {
    float: right;
}

JavaScript

var myApp = angular.module('MyApp', []);
myApp.directive('selectdown', function () {
        return {
            restrict: 'AE',
            require: 'ngModel',
            scope: {
                options: '=',
                defaultText: '=',
                onSelect: '='
            },
            template: '<div class="select-group">' +
                '<div class="select-heading">' +
                '<div class="select-title" ng-click="selectOpen=!selectOpen" ng-class="{\'open\':selectOpen}">' +
                '{{selectedName||defaultText}}' +
                '<span ng-if="selectOpen" class="drop-arrow">&#9662;</span>' +
                '<span ng-if="!selectOpen" class="drop-arrow">&#9656;</span>' +
                '</div>' +
                '</div>' +
                '<div ng-show="selectOpen" class="select-body">' +
                '<p ng-repeat="option in options" ng-click="setSelection(option)">' +
                '{{option.name}}' +
                '</p>' +
                '</div>' +
                '</div>',

            controller: function ($scope) {
                console.log($scope);
                $scope.selectedName = null;
                $scope.setSelection = function (selectedOption) {
                    $scope.options.forEach(function (option) {
                        option.selected = false;
                    });
                    selectedOption.selected = true;
                    $scope.selectedName = selectedOption.name;
                    $scope.onSelect(selectedOption);
                    $scope.selectOpen = false;
                };
                $scope.selectedName = null;
            }
        };
    });

myApp.controller('MyController', function ($scope) {
    $scope.options = [{
        name: 'Carnitas Burrito',
        value: 'CarnitasBurr'
    }, {
        name: 'Tinga Taco',
        value: 'TingaTac'
    }, {
        name: 'Mole Burrito',
        value: 'MoleBurr'
    }];
    $scope.defaultText = 'Select one';
   ...