JSFiddle - React, Tailwind, and code Playground

by otupman

HTML

<div ng-controller="FunWithClassesCtrl"> <span>{{isActive}}</span>

    <button ng-click="toggleActive()">Toggle</button>
    <p ng-class="{true: 'active', false: 'inactive'}[isActive]">Some text that will have the class applied.</p>
</div>

CSS

.active {
    background-color: green;
    color: white;
}
.inactive {
    background-color: red;
    color: white;
}
}

JavaScript

var app = angular.module('myApp', []);

function FunWithClassesCtrl($scope) {
    $scope.isActive = false;

    $scope.toggleActive = function () {
        $scope.isActive = !$scope.isActive;
    };

}