JSFiddle - React, Tailwind, and code Playground

by sebmade

HTML

<!doctype html>
<html>
<head>
  <title>last child</title>
  <script src="http://code.angularjs.org/angular-0.9.17.js" ng:autobind></script>
</head>
<body ng:controller="MyCtrl">
    <ul>
        <li ng:click="select($index)" ng:repeat="item in list" ng:class="styles['style'+$index]">{{item}}</li>
    </ul>
</body>
</html>

CSS

li.cell {
   color: red;   
}

li.selectedCell {
    color: green;
}

JavaScript

function MyCtrl() {
    this.list = ['un','deux','trois','quatre'];
    this.styles = { style1 : 'cell', style2 : 'cell', style3 : 'cell', style4 : 'cell'};
}
MyCtrl.prototype = {
    select : function(i) {
        if (this.styles['style'+i] == "selectedCell") {
            this.styles['style'+i] = "cell";
        } else {
            this.styles['style'+i] = "selectedCell";
        }            
    }
};