How can I change the background-color using ng-class?


Tags: javascript,css,angularjs,angularjs-ng-repeat,ng-class

Problem :

I am trying to change the background color whenever someone inputs a '5' while using ng-class. I am really new to AngularJS and just writing things to get the hang of it. Am I supposed to use an ng-if somewhere or have to change my CSS? Also where would I have to input the code? I know it has to be somewhere where I filter the number but am totally lost on how to write the code. Please help!

Here is my code:

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



Solution :

You could easily use ng-style here

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

Using ng-class it would be

Markup

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

CSS

.myOwnBg {
   background-color: yellow;
}

    CSS Howto..

    How to make information appear only when hovered over using jquery and css?

    How to apply two CSS classes to a single div/span

    How do I create a bar chart in CSS with an array of PHP float values?

    How to force the Sass interpreter to output non-css code?

    How to change style to a class from a rel attribute CSS

    How to move an image up and down smoothly with CSS?

    How to assign C# variable to CSS class variable in ASP.NET MVC ActionLink

    How to keep divs position fixed even after deleting its neighbors?

    How to animate image swap on hover

    How to get angled corner like this in CSS, it's not round?

    How to change color of SVG image using CSS (jQuery SVG image replacement)?

    How to make a custom clickable shape with CSS to cover the exact needed area?

    How to CSS Img Border on Hover without Shifting Image

    How to have full page that is not a background img or fixed positioned?

    How to display inline input in li?

    How to apply CSS to other elements except the hovered one?

    How do I make a line feed in a div tag?

    If div is visible, than show that content in other div with jQuery

    How to remove right border

    How to read CSS specification?

    How to avoid overlapping between two divs positioning absolute inside a div positioning relative?

    How can I force a list item to display on one line with CSS?

    How do I set the offset of a div from the top of an outer div to be the same as the offset from the side of the outer div using only css?

    How to slide in divs from off screen into absolute layout using CSS transitions?

    How to create and edit a css file in browser Dom by javascript and then download it?

    How to Prevent My CSS From Clashing With Facebook's CSS?

    What is the best CSS trick to reduce how much HTML you need?

    How to fix the shadow on my menu, Fiddle example shown

    How to make a braille interface for our website

    How to use px and % in the same layout like this