javascript - 使用 AngularJS 控制 CSS

Question

我正在尝试通过 AngularJS 控制 CSS。我为此目的使用 ng-class 和 ng-click .....为此我制作了两个函数 showError 和 showWarning。我试图通过分别设置它们的属性 true 和 false 来更改 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

Angular 的方式是在模板中制作：

<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 代码，建议您不要使用 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 一样。