Ng-класс - активная / неактивная кнопка

Question

У меня есть диапазон кнопок с 2 кнопками, и я хочу, чтобы, когда пользователь нажимал на одну из них, ng-class добавлял класс при активной кнопке (мои два представления отображаются с помощью ng-show/hide).

Я протестировал это, но это не работает:

HTML:

<div class="button-bar">
 <a class="button btn-transpr-left" ng-class="{'activ-btn': isActive1}" ng-click="firstStep()">Acceptées</a>
 <a class="button btn-transpr-right" ng-class="{'activ-btn': isActive2}" ng-click="nextStep()">En attente</a>
</div>

CSS:

.activ-btn {
 border-bottom: 3px solid !important;
 font-weight: bolder !important;
}

JS:

  $scope.isActive2 = false;
  $scope.isActive1 = true;


$scope.nextStep = function() {
  $scope.data.step += 1;
  $scope.isActive1 = $scope.isActive1;
  $scope.isActive2 = !$scope.isActive2;
}

$scope.firstStep = function() {
  $scope.data.step = 1;
  $scope.isActive1 = !$scope.isActive1;
  $scope.isActive2 = $scope.isActive2;
}

Может я ошибаюсь... Кто-то может мне помочь?

Спасибо всем людям!

Answer 1

Частично проблема заключалась в том, что вы не определяли data на вашей сфере. это было undefined и ошибка.

$scope.data = { step: 1 }

Я упростил это для вас. Вам не нужно действительно управлять этим с помощью явных флагов в вашей области, скорее вы можете просто проверить, соответствует ли текущее значение шага кнопке в ng-class выражение

ng-class="{'activ-btn':data.step == <desired step value>}"

тест - http://codepen.io/jusopi/pen/EPyONL