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.
1
-
use ng-class directive, lets you set a css class depending on some conditionPatrick Evans– Patrick Evans2014-02-13 20:31:49 +00:00Commented Feb 13, 2014 at 20:31
Add a comment
|
3 Answers
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.
Comments
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;
}
Comments
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.
