CODEWITHSUNDEEP
javascriptangularjs
lascoff
lascoff

Reputation: 1331

Angularjs directive change color of input box

I am using angularjs and am pretty new, I need a directive that depending upon a condition it will change the background color of the input box that has the directive attribute. How do I refeence the calling element to change it's background.

Upvotes: 0

Views: 5580

Answers (3)

madhured
madhured

Reputation: 443

Please find the below plunk for the example.

I created directive inputBox to do this

<input-Box is-maximized="isMaximized" />

The directive is 

<input type="input" ng-class="{mini: (isMaximized == 1), box: (isMaximized == 0)}" />

Used ng-class and changed the color based on the condition. if isMaximized is set to 1 in the parent controller it will apply mini class and if it is set to 0 it will apply box class.

http://plnkr.co/edit/ELi3XHk5xWaKMP4MCL2F?p=preview

Upvotes: 0

Dan Rocha
Dan Rocha

Reputation: 635

You can do it with ng-style, anyway, if you really need it wrapped in a directive I've made it for you in Plunkr

It'll update as soon as the input changes.

What I'm doing there is watching the color changing and set it to an ng-stylewithin the directive and transcluding it.

Upvotes: 3

Dries Marien
Dries Marien

Reputation: 211

Here is a working example of how it would look like using the ng-class: View Demo

<div ng-app>
<form>
    <input type="text" ng-class="{ error: faulty }"  size="30"/>
    <input type="checkbox" ng-model="faulty"/> check me
</form>


.error { 
    background-color:red; 
    border:2px solid blue; 
}

Upvotes: 0

Related Questions