JSFiddle - React, Tailwind, and code Playground

by dkrotts

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/0.9.11/chosen.jquery.min.js"></script>
<!doctype html>
<html>
    <head></head>
<body ng-controller="foo">
    <select id="mySelectList" select="optionsList" ng-model="myModel" ng-options="option.value as option.label for option in optionsList" data-placeholder="Select..." gaig-warning="warningMessage">
                    <option></option>
                </select>
    <h1>Model: {{myModel}}</h1>
</body>
</html>

JavaScript

var myApp = angular.module('myApp', []);
angular.element(document).ready(function() {
   angular.bootstrap(document, ['myApp']);
});

function foo($scope, $timeout) {
    $scope.optionsList = [
        { value: 'APPL', label: 'Apple' },
        { value: 'ORNG', label: 'Orange' },
        { value: 'BNANA', label: 'Banana' },
        { value: 'MNGO', label: 'Mango' },
        { value: 'STRWBRY', label: 'Strawberry' },
        { value: 'BLBRY', label: 'Blueberry' },
        { value: 'GRPFRT', label: 'Grapefruit' },
        { value: 'KWI', label: 'Kiwi' },
        { value: 'BLCKBRY', label: 'Blackberry' },
        { value: 'WTRMLN', label: 'Watermelon' },
        { value: 'PNEAPPL', label: 'Pineapple' }
    ];

    $scope.myModel = "";
}

myApp.directive('select', function($timeout, $compile) {
    var linker = function(scope, element, attrs, controller) {
        if (!controller) { // model containing a list of options must be assigned
            return;
        }

        element.addClass('chzn-select');

        element.chosen();

        scope.$watch(attrs.gaigSelect, function() {
            element.trigger('liszt:updated');
        });

        scope.$watch(attrs.ngModel, function() {
            element.trigger('liszt:updated');
        });

        scope.$watch(function () {
            return element.attr('class');
        }, function(newValue, oldValue) {
            element.next().removeClass(oldValue);
            element.next().addClass(newValue);
        });

        if (attrs.ngDisabled) {
            scope.$watch(attrs.ngDisabled, function() {
                element.trigger('liszt:updated');
            });
        }
    }

    return {
        restrict: 'A',
        require: '?ngModel',
        link: linker
    }
});