吴级 - 活动/非活动按钮

我有一个按钮范围与2个按钮，我想，当用户点击其中之一，ng-class按钮活动时添加类（我的两个视图显示的ng-show /隐藏）。吴级 - 活动/非活动按钮

我有测试这一点，但它不工作：

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; 
}

也许我做错误...有人可以帮助我吗？

谢谢所有人！

来源

2015-12-22 PositivProd

解释什么是行不通的 - 班级没有加入吗？ CSS不工作？请提供更多详情 –

只有第一个按钮才能应用该类，但点击时，什么也没有发生...... – PositivProd

问题的一部分是您没有在范围上定义data。这是undefined和错误了。

$scope.data = { step: 1 }

我已经简化了这个给你。你并不需要真正的明确标志在你的范围内推动这个，而是你可以简单地做一个检查，以查看当前步骤值是你想要的按钮在ng-class表达

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

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

来源

2015-12-22 20:22:26 jusopi

完美！非常感谢 – PositivProd

吴级 - 活动/非活动按钮

回答

相关问题