JSFiddle - React, Tailwind, and code Playground

by ruslans_uralovs

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div ng-app >
<div class="row" ng-controller="ExampleController">
    <div class="col-xs-8 col-xs-offset-2">

        <form role="form">
    <div class="input-group">
    	<input type="text" class="form-control" ng-model="myColor.name">
    	<div class="input-group-btn">
    		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
    		<ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu">
    			<li ng-repeat="color in colors" class="input-lg"><a href="#" ng-click="changeColor(color)">{{color.name}}</a></li>
    		</ul>
    	</div>
    </div>
    </div>
</div>
</div>

CSS

/* #color-dropdown-menu {
    min-width: 440px;
} */

JavaScript

function ExampleController($scope) {
    $scope.colors = [
      {name:'black', shade:'dark'},
      {name:'white', shade:'light'},
      {name:'red', shade:'dark'},
      {name:'blue', shade:'dark'},
      {name:'yellow', shade:'light'}
    ];
    $scope.myColor = $scope.colors[2]; // red
    $scope.changeColor = function(newColor) {
        $scope.myColor = newColor;    
    };
};