Javascript 使用AngularJS控制CSS

我试图通过AngularJS控制CSS。我正在使用ng类和ng click用于此目的。。。。。为此，我制作了两个功能淋浴ROR和showWarning。我试图通过分别设置CSS的属性true和false来更改CSS

--------CSS---------

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

---

我已成功访问该函数并使用ng click打印消息文本，但无法更改CSS属性///

Angular way正在模板中制作：

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

{{message}}

stun

{{errorMessage}}
{{warningMessage}}
模拟误差
模拟警告

不需要javascript代码，并且建议不要将javascript用于此类视图操作

编辑：您可以对消息文本使用范围变量，而不是静态文本。

应该是这样的

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

{{message}}

stun

{{messageText}}
{{messageText}}
模拟误差
模拟警告

我找到了解决方案，我们还必须在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> 

。警告为真{
背景颜色：橙色；
}
.错误为true{
背景色：红色；
}
{{messageText}}
模拟误差
模拟警告

---

和js reamin相同。

Sir消息文本是一个静态内容…我想通过更改背景颜色生成一个动态内容？？？…请提供帮助

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

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

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