使用AngularJS控制CSS

Question

I am trying to control CSS through AngularJS. I am using ng-class and ng-click for this purpose ..... I have made two function showError and showWarning for this purpose. I am try to change CSS through setting their properties true and false respectively

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

I am successful to access the function and printing the messageText using ng-click but can't change the CSS properties////

Answer 1

Angular way is making that in template:

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

No javascript code is needed and advisely, you shouldn't use javascript for that kind of view manipulations.

EDIT: You can use scope variables for message texts instead of static texts.

Answer 2

it should be like this

<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

I have found the solution, We have to pass boolean parameter in css also :

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

and js reamin same.