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

    Show/Hide function between JS, CSS, and HTML

    MVC How make a logout button

    How do I make my background-color fill entire width of div when applied to a `ul li`?

    How would I get an img element to render under a background-image in CSS

    How to get css property of a DOM element server-side?

    How to change the color of the text next to an input field in an HTML form?

    CSS: How the backgrounds can extend the border and overlap?

    How to do CSS nth-child in span tags?

    How to apply different css style to gwt datagrid widget in the same page? [duplicate]

    How to place divs with background-images in order with 100% width?

    How can I align my search button to the right?

    How to add CSS to page to the bottom of the custom chrome extension

    How to position 3 images in two equal height columns?

    How can I get rid of those animation in jquery toggle?

    How can I show a element on my site when hovered with only JS?

    How do I use the CSS box-model to make sure my body is spaced from the edge of the window despite being 100% high?

    How to add a class if div height reaches a fixed height?

    How to compile CSS into SCSS

    How can I make my webpage background cover fixed for the full size page in css?

    How can i get the source of the image in one div to another?

    How to tell Modernizr load (yepnope) to add CSS at bottom of head?

    CSS and HTML: How to create an Expanding DIV On Click?

    jQuery - How to show element when another has a value

    How to prevent input elements from affecting a table's columns' widths?

    How to target tablet devices with CSS queries

    How to correct CSS formatting problem in Visual Studio

    How to make sure one css file does not override another one?

    How to fix animation problems css3

    How do I use CSS transformations to slide a div on screen?

    How to generate CSS color in proportion to value?