Сохранить и вызвать класс с помощью ng-click

Question

Я реализовал ng-click для переключения <div> тегов между двумя css классами. 'on' и 'off' в этом примере.

Класс 'off' используется по умолчанию.

Мне кажется, что я должен использовать логическое значение, чтобы отслеживать, был ли он нажат (истина / ложь), но не уверен, как и где это реализовать.Или есть более короткий путь?

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

app.controller("clickToggle", function($scope) {

  $scope.class = "off";

  $scope.changeClass = function() {
    if ($scope.class === "off")
      $scope.class = "on";
    else
      $scope.class = "off"
  };

});

.off {
  border: 1px solid black;
  background-color: white;
  box-sizing: border-box !important;
  border-radius: 200px !important;
  font: 30px 'Roboto';
  font-weight: 400;
  padding: 10px, 10px, 10px, 10px;
  color: black;
  text-align: center;
  width: 80px;
  height: 80px;
  display: inline-block;
  float: left;
  overflow: hidden;
  line-height: 80px;
}

.on {
  border: 1px solid black;
  background-color: blue;
  box-sizing: border-box !important;
  border-radius: 200px !important;
  font: 30px 'Roboto';
  font-weight: 400;
  padding: 10px, 10px, 10px, 10px;
  color: black;
  text-align: center;
  width: 80px;
  height: 80px;
  display: inline-block;
  float: left;
  overflow: hidden;
  line-height: 80px;
}

.circle:hover {
  font-weight: 400;
  background: #9fa8da;
  color: #f7f3eb;
  z-index: 9999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="clickToggle">

  <div class="circle" ng-class="class" ng-click="changeClass()">1</div>

</div>

Answer 1

Если класс .off используется по умолчанию, вы можете применить стиль по умолчанию к .circle.После этого вы можете просто включить и выключить класс .on, нажав

angular.module("myApp", [])
.controller("clickToggle",['$scope', function($scope) {
  $scope.changeClass = function() {
    $scope.isActive = !$scope.isActive;
  };
}]);

.circle {
  border: 1px solid black;
  background-color: white;
  box-sizing: border-box !important;
  border-radius: 200px !important;
  font: 30px 'Roboto';
  font-weight: 400;
  padding: 10px, 10px, 10px, 10px;
  color: black;
  text-align: center;
  width: 80px;
  height: 80px;
  display: inline-block;
  float: left;
  overflow: hidden;
  line-height: 80px;
}

.on {
  background-color: blue;
}

.circle:hover {
  background: #9fa8da;
  color: #f7f3eb;
  z-index: 9999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="clickToggle">

  <div class="circle" ng-class="{'on': isActive}" ng-click="changeClass()">1</div>

</div>