JSFiddle - React, Tailwind, and code Playground

Toggle Object

by pmamode

HTML

<div ng-app="myModule" ng-controller="myController">

  <button ng-click="toggle()">{{toggleButton}}</button>
  <div ng-class="{'red' : toggleStatus, 'green' : !toggleStatus}">
    {{toggleStatus}}
  </div>

  <button ng-click="areaStatus = !areaStatus">{{areaStatus && areaStatus || areaStatus}}</button>
  <div ng-class="{'red' : areaStatus, 'green' : !areaStatus}">
    {{areaStatus}}
  </div>
  <br>

  <button ng-click="areaStatus = !areaStatus; toggle(areaStatus)" ng-bind="areaStatus && areaStatus || areaStatus"></button>
  <div ng-class="{'red' : areaStatus, 'green' : !areaStatus}">
    {{areaStatus}}
  </div>
  <br>


  <input type="password" ng-model="password" /> {{ ( password == "qwerty") }}
  <!-- This one is ok -->
  {{ password == "qwerty" && apple || orange }}
  <!-- This one is not -->
  <br>
  <span ng-bind="( password == qwerty)"></span>
  <span ng-bind="password == qwerty && apple || orange"></span>



</div>

CSS

.red {
  color: red;
}

.green {
  color: green;
}

JavaScript

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

myModule.controller('myController', function($scope) {

  $scope.areaStatus = true;
  $scope.apple = "APPLE";
  $scope.orange = "ORANGE";

  $scope.toggleButton = "--Select--";
  $scope.toggleStatus = false;
  $scope.toggle = function(bool) {
    $scope.apple = bool;
    $scope.orange = bool;
    $scope.toggleStatus = !$scope.toggleStatus;
    if ($scope.toggleStatus == true) {
      $scope.toggleButton = "TRUE";
    } else {
      $scope.toggleButton = "FALSE";
    }

  }
});