AngularJS Example:

by David Thomas

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app>
  <div ng-controller="VocabCtrl">
  <b>Words</b> {{selectedItem}}
      <ul class="unstyled">
          <li class="tHi" ng-repeat="item in items" ng-click="getEdit(item.word)" ng-style="bgstyle(item.streak)">
           <span>{{item.word}} {{item.streak}}</span>
         </li>
       </ul>
    </div>
</div>

CSS

.tHi:hover
{
    cursor: pointer;
    background-color: #9f9 !important;
}

JavaScript

function VocabCtrl($scope) {
  $scope.selectedItem = '';
  $scope.items = [
    {word: 'carminative', streak: 5},
    {word: 'opitulation', streak: 4},
    {word: 'adosculation', streak: 3},
    {word: 'brant', streak: 2},
    {word: 'maegth', streak: 1},
    {word: 'quire', streak: 0},
    {word: 'bildungsroman', streak: 34},
    {word: 'terp', streak: 33},
    {word: 'veilleuse', streak: 32},
    {word: 'libanotophorous', streak: 31},
    {word: 'bartisan', streak: 30},
    {word: 'nephalism', streak: 29},
    {word: 'synalepha', streak: 28},
    {word: 'chiengora', streak: 27},
    {word: 'shunpiking', streak: 26},
    {word: 'ichnology', streak: 25},
    {word: 'poitrel', streak: 24},
    {word: 'edacity', streak: 23},
    {word: 'tufthunter', streak: 22},
    {word: 'tramble', streak: 21},
    {word: 'inosculation', streak: 20},
    {word: 'telpher', streak: 19},
    {word: 'triboulet', streak: 18},
    {word: 'quincunx', streak: 17},
    {word: 'barbican', streak: 16},
    {word: 'marcid', streak: 15},
    {word: 'aposiopesis', streak: 14},
    {word: 'epigone', streak: 13},
    {word: 'ptyalism', streak: 12},
    {word: 'smegmatic', streak: 11},
    {word: 'allantoid', streak: 10},
    {word: 'weasand', streak: 9},
    {word: 'botuliform', streak: 8},
    {word: 'hygrophanous', streak: 7},
    {word: 'halacha', streak: 6},
    {word: 'rason', streak: 5},
    {word: 'achates', streak: 4},
    {word: 'misocapnist', streak: 3}];

    $scope.bgstyle = function (streak) {
        var red = 255;
        var green = 255-streak;
        var blue = 255-streak;
        var rgb = blue | (green << 8) | (red << 16);
        var sColor = '#' + rgb.toString(16);
        return {backgroundColor: sColor};
    }

    $scope.getEdit = function (word) {
        $scope.selectedItem = word;
        //console.log(word);
    }
}