使用AngularJS控制CSS

Question

我想通過AngularJS控制CSS。我正在使用ng-class和ng-click來達到這個目的.....我爲此做了兩個函數showError和showWarning。我試圖通過分別

設置其屬性真假改變CSS -------- --------- CSS

.error { 
     background-color: red; 
    } 
.warning { 
     background-color: orange; 
    } 

------- HTML ---------

<div> 
    <h2> {{ message }} </h2> 
    <ul> 
     <li class="menu-disabled-{{ isDisabled }}" ng-click="stun()"> Stun</li> 
    </ul> 
    <div class='{ warning : {{ isWarning }}, error : {{ isError }} }'> 
    {{ messageText }}</div> 
    <button ng-click="showError()"> Simulate Error</button> 
    <button ng-click="showWarning()">Simulate Warning</button> 


</div> 

------- JS -----------

$scope.isError = false; 
    $scope.isWaring = false; 

    $scope.showError = function(){ 
     console.log("error here"); 
     $scope.messageText = "This is an error"; 
     $scope.isError = true; 
     $scope.isWaring = false; 
    }//showError 

    $scope.showWarning = function() { 
     console.log("warning here"); 
     $scope.messageText = "Just a Warning, Carry ON !!!"; 
     $scope.isError = false; 
     $scope.isWaring = true; 
    }//showWarning 

我成功訪問功能並使用ng-click打印messageText但不能改變的CSS屬性////

Answer 1

角方法是制定，在模板：JavaScript是需要代碼

<div> 
    <h2> {{ message }} </h2> 
    <ul> 
     <li ng-class="{'menu-disabled': isDisabled}" ng-click="stun()"> Stun</li> 
    </ul> 
    <div ng-show="isError" class="error">{{ errorMessage }}</div> 
    <div ng-show="isWarning" class="warning">{{ warningMessage }}</div> 

    <button ng-click="isError=true;isWarning=false"> Simulate Error</button> 
    <button ng-click="isWarning=true;isError=false">Simulate Warning</button> 

</div> 

沒有和advisely，你不應該使用JavaScript的那種查看操作。

編輯：您可以使用範圍變量的消息文本，而不是靜態文本。

Answer 2

它應該是這樣的

<div> 
    <h2> {{ message }} </h2> 
    <ul> 
     <li class="'menu-disabled' : isDisabled" ng-click="stun()"> Stun</li> 
    </ul>  
<div class='error' ng-show="isDisabled" > {{ messageText }} </div> 
<div class='warning' ng-show="isWarning" > {{ messageText }} </div> 
<button ng-click="showError()"> Simulate Error</button> 
<button ng-click="showWarning()">Simulate Warning</button> 


    </div> 

Answer 3

我已經找到了解決辦法，我們必須通過布爾參數CSS也：

.warning-true{ 
     background-color: orange; 
    } 
.error-true{ 
    background-color: red; 
} 

<div class=" warning-{{ isWarning }} , error-{{ isError }} ">{{ messageText }} </div> 
    <button ng-click="showError()"> Simulate Error</button> 
    <button ng-click="showWarning()">Simulate Warning</button> 

和JS reamin相同。