JSFiddle - React, Tailwind, and code Playground

by nicolasmoise

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.8/angular-animate.min.js"></script>
<div ng-app="myApp">
     <div ng-controller='ctrl'>
         <div ng-repeat="student in students" ng-class="levelClass(student.level)">
             {{student.name}}
         </div>
    </div>
</div>

CSS

.level1{
    background-color: red;
}

.level2{
    background-color: blue;
}

JavaScript

angular.module('myApp',[])
  .controller('ctrl', function ($scope){
        $scope.students=[
            {name: 'foo', level:1},
            {name: 'bar', level:2}
        ];
      $scope.levelClass = function(i){
          return "level"+i;
      }
  });