JSFiddle - React, Tailwind, and code Playground

by vinodlouis

HTML

<div ng-app="FooBar">
    <div ng-controller="fooCtrl">
  
        <div ng-repeat="item in list">
            <div class="circle {{status}}">
                
            </div>
            <button ng-click="setStatus($index)">click me</button>
        </div>
  
    </div>
</div>

CSS

.circle{
    border-radius: 50%;
    background: #aaa;
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    transition: all 200ms;
}
.circle.clicked{
    background: #08f;
}

JavaScript

angular.module('FooBar',[]);

function fooCtrl($scope, $timeout){
    $scope.list = [1, 2, 3]; //This can not be changed.
    $scope.status = ['status','status','status']
    $scope.setStatus = function(index){
        alert(index)
        //Simulate an ajax request
        $timeout(function(){
            $scope.status = null;
        }, 1000);
    }
}