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

Ng级 - 活动/非活动按钮

1 个答案: