如何使用ng-class更改背景颜色？

Question

我想在使用ng-class时输入'5'时改变背景颜色。 我是AngularJS的新手，只是写东西来掌握它。 我应该使用ng-if某个地方还是必须改变我的CSS？ 我还要在哪里输入代码？ 我知道它必须是我过滤数字的地方，但我完全迷失了如何编写代码。 请帮忙！

这是我的代码：

<body ng-init="numbers=[0,1,2,3,4,5]">
<nav>
  <a href="#" ng-click="tab='numbers'" ng-class="{active:tab=='numbers'}">Numbers</a>
  <a href="#" ng-click="tab='form'" ng-class="{active:tab=='form'}">Form</a>
</nav>
<div ng-switch="tab">
  <div ng-switch-when="numbers">
    <input type="text" ng-model="myValue" />
    <h1 ng-repeat="number in numbers | filter:myValue"}>{{ number }}</h1>
  </div>
  <div ng-switch-when="form">
    <button ng-click="numbers.pop(); tab='numbers'">Pop</button>
    <button ng-click="numbers.push(numbers.length); tab='numbers'">Push</button>
  </div>
</div>

Answer 1

你可以在这里轻松使用ng-style

<input type="text" 
 ng-model="myValue" 
 ng-style="{'background-color':myValue == 5 ?  'red': 'white'}"/>

使用ng-class就可以了

标记

<input type="text" ng-model="myValue" ng-class="{'myOwnBg': myValue == 5}"/>

CSS

.myOwnBg {
   background-color: yellow;
}

Answer 2

就像你使用ng-class="{active:tab=='numbers'}"

<input type="text" ng-model="myValue" ng-class="{ bg : myValue == 5 }">

如果您不想定义css类，可以使用ngStyle 。

如何使用ng-class更改背景颜色？

问题描述

2 个解决方案

解决方案1
10 已采纳 2015-09-02 07:07:49

解决方案2
2 2015-09-02 07:09:27

如何使用ng-class更改背景颜色？

问题描述

2 个解决方案

解决方案1 10 已采纳 2015-09-02 07:07:49

解决方案2 2 2015-09-02 07:09:27

解决方案1
10 已采纳 2015-09-02 07:07:49

解决方案2
2 2015-09-02 07:09:27