JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<div ng-app='myApp'>
    <div ng-controller="myCtrl"> 
        
        <span>Example 1:</span>
        <select ng-model="example1" bs-selectbox>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select> 
        <span>You've selected: {{example1}}</span>

            <br><br> 
        
        <span>Example 2:</span>
        <select ng-model="example2" bs-selectbox="Select Item">
            <option value="4">Four</option>
            <option value="5">Five</option>
            <option value="6">Six</option>
        </select> 
        <span>You've selected: {{example2}}</span>
            
            <br><br> 
        
        <span>Example 3:</span>
        <select ng-model="example3" ng-options="o.value as o.label for o in example3items" bs-selectbox="Select Item"></select>
        <span>You've selected: {{example3}}</span>

            <br>
    </div>
</div>

JavaScript

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

function myCtrl($scope) {
    $scope.example1 = "2";
    $scope.example2 = "0";
    $scope.example3 = "9";

    $scope.example3items = [{
        'label': 'Seven',
        'value': 7
    }, {
        'label': 'Eight',
        'value': 8
    }, {
        'label': 'Nine',
        'value': 9
    }, ];
}
//Bootstrap dropbox directive
myApp.directive('bsSelectbox', function ($compile, $timeout, $parse) {
    return {
        restrict: 'A',
        priority: 100,
        transclude: true,
        scope: {
            themodel: '=ngModel',
            thearray: '@ngOptions',
            defaultval: '@bsSelectbox'
        },
        template:
            '<div class="bs-selectbox" style="display:inline;">' +
            '<div class="btn-group">' +
            '<button class="btn dropdown-toggle" data-toggle="dropdown" type="button">' +
            '{{display}} ' +
            '<span class="caret"></span>' +
            '</button>' +
            '<ul class="dropdown-menu">' +
            '<li ng-show="defaultval">' +
            '<a href="#" ng-click="change(false)"> <span>{{defaultval}}</span> </a>' +
            '</li>' +
            '<li ng-show="defaultval" class="divider"></li>' +
            '<li ng-repeat="itm in elements">' +
            '<a href="#" ng-click="change(itm)">' +
            '<span>{{itm.label}}</span>' +
            '</a>' +
            '</li>' +
            '</ul>' +
            '</div>' +
            '<div style="display:none;" class="bs-selectbox-transclude" ng-transclude></div>' +
            '</div>',
        link: function (scope, element, attrs) {
            scope.display = '--';
            scope.elements = [];
            scope.element = angular.element(".bs-selectbox").index(element);
            attrs.$observe('bsSelectbox', function (value) {
                if (value) scope.display = value;
            });
            attrs.$observe('ngOptions', function (value, element) {
                if...