html - Ng 类 - 事件/非事件按钮

Question

我有一个包含 2 个按钮的按钮范围，我希望当用户单击其中一个按钮时，ng-class 在按钮上添加类处于事件状态(我的两个 View 由 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 和 error-ing。

$scope.data = { step: 1 }

我已经为您简化了这个。您不需要通过范围上的显式标志来真正驱动它，而您可以简单地检查以查看当前步骤值是否是您在 ng-class 表达式中的按钮上想要的值

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

测试-http://codepen.io/jusopi/pen/EPyONL