離子 - 如何更改點擊時的按鈕顏色

目前我正在嘗試使我的移動應用程序成爲像我的OFF按鈕時的默認灰色（活動），當我進入我的應用程序時。 ON按鈕的默認綠色（無效）。點擊ON按鈕後，ON按鈕變爲灰色（激活），OFF按鈕變爲紅色（無效）。當我點擊OFF按鈕時，按鈕將變回灰色（激活）。離子 - 如何更改點擊時的按鈕顏色

我正在展示我想要實現的內容。任何人都知道如何用標誌對其進行編碼？

controller.js

.controller('singleProjectorRoomCtrl', ['$scope', '$stateParams', function($scope, $stateParams) { 

$scope.buttonState = false; 


function toggleButtonState() 
{ 
    if ($scope.buttonState == false) 
    { 
     $scope.buttonState = true; 
    } 
    else 
    { 
     $scope.buttonState = false; 
    } 
}; 

$scope.goBack = function() { 
window.history.back(); 
} 

}])

HTML

<ion-view title="Single Projector Room" id="page9"> 

<ion-nav-buttons side="left"> 
    <button class="button back-button buttons button-clear header-item" ng-click="goBack()"> 
     <i class="icon ion-ios-arrow-back"> Back</i> 
    </button> 
    </ion-nav-buttons> 

    <ion-content padding="true" style="background: url(img/EDD79InSMCeYeMOSchjm_remote.jpg) no-repeat center;background-size:cover;" class="has-header"> 

    <div class="row"> 
    <div class="col"><br><br><br><br></div> 
    </div> 

    <div class="row"> 
    <div class="col col-offset-5 col-30 text-center"><h4 style="color: #FFFFFF;">Single Projector Control</h4></div> 
    <div class="col col-30 text-center"><h4 style="color: #FFFFFF;">Screen Control</h4></div> 
    </div> 

    <div class="row"> 
    <div class="col col-offset-5 col-30 text-center"><button class="button button-balanced button-large icon-right ion-power" ng-click="toggleButtonState()" ng-if="buttonState=true; button-stable">On</button></div> 
    <div class="col col-30 text-center"><button class="button button-dark button-large icon-right ion-arrow-up-c">Up</button></div> 
    </div> 

    <div class="row"> 
    <div class="col col-offset-5 col-30 text-center"><button class="button button-assertive button-large icon-right ion-android-cancel" ng-click="toggleButtonState()" ng-if="buttonState=true; button-stable">Off</button></div> 
    <div class="col col-30 text-center"><button class="button button-dark button-large icon-right ion-arrow-down-c">Down</button></div> 
    </div> 

    <div class="row"> 
    <div class="col"><br><br></div> 
    </div> 

    <div class="row"> 
    <div class="col col-offset-5 col-30 text-center"><h4 style="color: #FFFFFF;">Mic Control</h4></div> 
    </div> 

    <div class="row"> 
    <div class="col col-offset-5 col-30 text-center"><button class="button button-balanced button-large icon-right ion-power">On</button></div> 
    </div> 

    <div class="row"> 
    <div class="col col-offset-5 col-30 text-center"><button class="button button-assertive button-large icon-right ion-android-cancel">Off</button></div> 
    </div> 
</div> 

    </ion-content> 
</ion-view>

來源

2017-05-08 Joseph xxx

你可以使用ng-class指令。使用現有的所有代碼，你需要做的是：

HTML：

<button class="myButtonClass" ng-class="{buttonActive: buttonState == true}" ng-click="buttonState = !buttonState"> 
    Toggle Me 
</button>

，然後你只想有你的CSS類：

.myButtonClass { 
    background: gray; 
} 
.myButtonClass.buttonActive { 
    background: red !important; 
}

這是一個基本的演示：http://jsfiddle.net/mbndkt9L/3/

來源

2017-05-08 02:35:37

所以我仍然像我的國旗一樣？我試過把代碼放進去。但是按鈕會變成灰色，並且在點擊時不會激活。任何解決方案？ –

我的答案中有一種類型。它應該是'.myButtonClass.buttonActive'而不是'.myButtonClass .buttonActive'。我已經修復了我的答案，現在就試試吧 –

它看起來還不像工作。單擊時該按鈕仍然不活動。 –

離子 - 如何更改點擊時的按鈕顏色

回答

相關問題