吳級 - 活動/非活動按鈕

我有一個按鈕範圍與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

吳級 - 活動/非活動按鈕

回答

相關問題