JSFiddle - React, Tailwind, and code Playground

by Edward Tanguay

HTML

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div ng-controller="mainController">
    
  <div>
      <span ng-repeat="displayType in displayTypes">
          <button  ng-class="(displayType.idCode == currentDisplayTypeIdCode) ? 'buttonDisplayTypeSelected' : 'buttonDisplayTypeUnselected'" class="btn btn-default btn-xs "  ng-click="selectDisplayType(displayType.idCode)">{{displayType.title}}</button>
      </span>
  </div>  
    
    <div>Current display type is: <b>{{currentDisplayTypeIdCode}}</b>
    
</div>

CSS

body {
    padding: 30px;
}

.date_control {
    margin: 0 0 3px 0;
    width: 200px;
}

.buttonDisplayTypeUnselected {
    background-color: beige;
}
.buttonDisplayTypeSelected, .buttonDisplayTypeSelected:focus {
    background-color: tan;
}

JavaScript

angular.module('myApp', [])
.controller('mainController', function($scope) {
    
    $scope.currentDisplayTypeIdCode = 'topTen';
    
    $scope.displayTypes = [
        {idCode: 'all', title: 'Show All'},
        {idCode: 'topTen', title: 'Top 10'},
        {idCode: 'favorites', title: 'Favorites'}
    ];
    

    $scope.selectDisplayType = function (displayTypeIdCode) {
        $scope.currentDisplayTypeIdCode = displayTypeIdCode;
    }    
    
})