JSFiddle - React, Tailwind, and code Playground

by Djul

HTML

<div ng-app>
  <div ng-controller="controller" ng-init="count=0">
      <input type="checkbox" ng-model="done"/>Check me<br>
      Counter = {{count}} <input type="button" value="-" ng-click="count=count-1"> <input type="button" value="+" ng-click="count=count+1"> <input type="button" value="reset" ng-click="count = 0">
      <p ng-show="red" style="background-color:red;">
          This show up when the checkbox is checked and counter is greater than 0!
      </p>
      <p ng-show="green" style="background-color:green;">
          This show up when the checkbox is not checked and counter is equal to 0!
      </p>
      <p> this will work but hey, check the code, this is not realistic nor readable nor maintenable solution :S </p>
  </div>
</div>

JavaScript

function controller($scope) {
    // introducing flags to describe state of other variable models:
    $scope.red = $scope.done && $scope.count>0;
    $scope.green = !$scope.done && $scope.count==0;

    $scope.$watch('done', function(){
        updateFagsToMaintainViewState();
    });
    
    $scope.$watch('count', function(){
        updateFagsToMaintainViewState();
    });
    
    var updateFagsToMaintainViewState = function(){
        $scope.red = $scope.done && $scope.count>0;
        $scope.green = !$scope.done && $scope.count==0;
    }
}