JSFiddle - React, Tailwind, and code Playground

by Djul

HTML

<div ng-app>
  <div ng-controller="controller" ng-init="count=0;done=false">
      <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>nothing will show up, not even the green which seems to be in the good state at first sight, this is not working :(</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;
}