Как я могу изменить цвет фона с помощью ng-class?

Я пытаюсь изменить цвет фона всякий раз, когда кто-то вводит "5" при использовании ng-класса. Я действительно новичок в 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>

Источник

2 ответа

Решение

Вы могли бы легко использовать 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;
}
Источник

Так же, как вы сделали с ng-class="{active:tab=='numbers'}"

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

Если вы не хотите определять класс CSS, вы можете использовать ngStyle,

Источник
Другие вопросы по тегам