JSFiddle - React, Tailwind, and code Playground

by ganarajpr

HTML

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="span12" ng-controller="CalendarController">
                <select name="day" id="daySelector" ng-model="days" dropdown>
                    <option>1</option>
                    <option>1</option>
                    <option>1</option>
                    <option>1</option>
                    <option>1</option>
                    <option>1</option>
                    <option>1</option>
                    <option>1</option>
                    <option>1</option>
                    <option>1</option>
                </select>
            </div>
        </div>
    </div>
    <script type="text/ng-template">
        <div class="selectBox" ng-click="onSelectClick($event)" ng-class="state">
            <div class="oneItem">
                {{selectedItem}}<span class="arrow-down position-right"></span>
            </div>
            <div ng-repeat="day in days" class="item" ng-click="itemSelected($event,day)">
                {{day}}
            </div>
        </div>
    </script>
</body>
</html>

CSS

.oneItem{
    height: 25px;
    overflow: hidden;
    text-align: center;
    min-width: 100px;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
}

.position-right{
    position: absolute;
    right: 5px;
    top:13px;
}

.selectBox{
    background-color: #c5c5c5;
    width: 100px;
}

.selectBox .item{
    border-bottom: 1px;
    border-bottom-color: #888;
    border-bottom-style: solid;
    cursor: pointer;
}

.selectBox .item:hover{
    background-color: #0088cc;
    color: #FFF;
}

.arrow-up {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    border-bottom: 5px solid #333;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    border-top: 5px solid #333;
}

.arrow-right {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;

    border-left: 5px solid #333;
}

.arrow-left {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;

    border-right:5px solid #333;
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.directive('dropdown',function(){
        return {
            restrict: 'A',
            replace:true,
            require: 'ngModel',
            transclude:false,
            templateUrl : 'dropdown.html',
            compile: function compile(tElement, tAttrs,transclude) {
                console.log(transclude);
                return {
                    post: function (scope, iElement, iAttrs, ctrl)
                    {
                        scope.state = "oneItem";
                        scope.onSelectClick = function($event){
                            $event.stopImmediatePropagation();
                            scope.state = "";
                        }

                        $(document).click(function(){
                            scope.state = "oneItem";
                            scope.$apply();
                        });

                        scope.itemSelected = function($event,item){
                            $event.stopImmediatePropagation();
                            scope.selectedItem = item;
                            scope.state = "oneItem";
                        }
                    }
                };
            }
        }
    });
        
        
        function CalendarController($scope){
    $scope.days = [];
    for( var i = 1; i <= 31;i++){
        $scope.days.push(i);
    }
}