JSFiddle - React, Tailwind, and code Playground

by gogirl

HTML

<div ng-controller="MyCtrl"> <span>Change button styles</span>

    <button ng-class="{true: 'active', false: 'inactive'}[isActive]" ng-click="toggleActive()">{{isActive}}</button>
    <p ng-class="{true: 'active', false: 'inactive'}[isActive]"ng-click="toggleActive()">Don't put quotes on true and false.</p>Change button text and Style
    <input type="checkbox" ng-model="isActive">
</div>

CSS

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

JavaScript

var app = angular.module('myApp', []);
//controller data-model
//view directives and databinding
//https://coderwall.com/p/r3_geg


function MyCtrl($scope) {
    $scope.isActive = false;
    //Keep controllers ignorant of styles-their job is to change state
    $scope.toggleActive = function () {
        $scope.isActive = !$scope.isActive;
    };
    


}