Управление CSS с помощью AngularJS

Question

Я пытаюсь контролировать CSS через AngularJS. Я использую 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 

Я успешным, чтобы получить доступ к функции и печать сообщенияText с помощью ng-click но не может изменить Свойства CSS ////

Answer 1

Угловой путь делает, что в шаблоне:

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

Нет Javascript необходим код и advisely, вы не должны использовать JavaScript для такого рода вид манипуляции.

EDIT: Вы можете использовать переменные области видимости для текстов сообщений вместо статических текстов.

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 же.