Ng-class - 活动/非活动按钮

Question

我有一个包含 2 个按钮的按钮范围，我希望当用户单击其中一个按钮时，ng-class 在激活的按钮上添加 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-class - 活动/非活动按钮

Ng-class - Active / Inactive button

html

css

angularjs

ionic