2015-09-02 3 views
2

Я пытаюсь изменить цвет фона всякий раз, когда кто-то вводит «5» при использовании ng-класса. Я действительно новичок в AngularJS и просто пишу вещи, чтобы повесить его. Предполагаю ли я использовать ng-if где-нибудь или изменить свой CSS? И где я должен был бы ввести код? Я знаю, что это должно быть где-то, где я отфильтровываю число, но полностью потерял, как написать код. Пожалуйста помоги!Как изменить фоновый цвет с помощью ng-класса?

Вот мой код:

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

ответ

9

Вы можете легко использовать ng-style здесь

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

Использование ng-class было бы

Markup

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

CSS

.myOwnBg { 
    background-color: yellow; 
} 
+0

Это сработало! Спасибо за быстрый ответ. Однако, есть ли способ использования ng-класса для этого? –

+0

NM мой последний комментарий, я думаю, сайт не обновился достаточно быстро, прежде чем я набрал свой вопрос. Спасибо еще раз за помощь! –

+0

@DavidTrinh Рад помочь вам .. Спасибо :) Спасибо! –

2

Просто так, как вы сделали с ng-class="{active:tab=='numbers'}"

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

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

Смежные вопросы