In my main html (lets say it uses ng-controller="controller1"), I'd like to put a conditional class on a div that would change its background color whenever a form under ng-controller="controller2" is dirty.
Is there a way to just put that as a conditional statement inside a ng-class?
There will be multiple forms and multiple correlating divs that need to coordinate, so I was just trying to e up with the simplest way possible.
EDIT- Example Code of my current setup:
HTML:
<html ng-app="testapp">
<body ng-controller="ControllerA">
<p ng-class="{'updates-made' : boolUpdatesMade}">
My background will change whenever an update is made on the form
</p>
<form name="editForm" ng-controller="ControllerB">
<input type="text" name="changeme">
<button ng-click="save()">Save</button>
</form>
</body>
</html>
Controller.js:
testapp.controller("ControllerB", function($scope){
$scope.save = function(){
if($scope.editForm.$dirty){
$scope.boolUpdatesMade = true;
}
}
}
What I'd expect to happen is that when I set boolUpdatesMade=true in ControllerB, the CSS class "updates-made" would be applied to the
in the HTML. This isn't the case.
Here's a link to the JSFiddle for this example: /
In my main html (lets say it uses ng-controller="controller1"), I'd like to put a conditional class on a div that would change its background color whenever a form under ng-controller="controller2" is dirty.
Is there a way to just put that as a conditional statement inside a ng-class?
There will be multiple forms and multiple correlating divs that need to coordinate, so I was just trying to e up with the simplest way possible.
EDIT- Example Code of my current setup:
HTML:
<html ng-app="testapp">
<body ng-controller="ControllerA">
<p ng-class="{'updates-made' : boolUpdatesMade}">
My background will change whenever an update is made on the form
</p>
<form name="editForm" ng-controller="ControllerB">
<input type="text" name="changeme">
<button ng-click="save()">Save</button>
</form>
</body>
</html>
Controller.js:
testapp.controller("ControllerB", function($scope){
$scope.save = function(){
if($scope.editForm.$dirty){
$scope.boolUpdatesMade = true;
}
}
}
What I'd expect to happen is that when I set boolUpdatesMade=true in ControllerB, the CSS class "updates-made" would be applied to the
in the HTML. This isn't the case.
Here's a link to the JSFiddle for this example: http://jsfiddle/tPGLT/1/
Share Improve this question edited Jul 25, 2013 at 14:24 Photovor asked Jul 24, 2013 at 14:39 PhotovorPhotovor 4031 gold badge6 silver badges19 bronze badges2 Answers
Reset to default 3Angular already adds in a class called "ng-dirty" to a form (and the individual field) whenever it has been touched...assuming you have a form element to attach it to. Simplest is to create a CSS class with whatever styling you want based on that. If you preferred your own class, you could do an ng-class to evaluate the form state as such:
<form name="my_form" ng-class="{'class-name' : my_form.$dirty}">
EDIT:
Just saw that you want this on a different div. Assuming the Div is under the same controller as the form, this will still work:
<form name="my_form">
and
<div ng-class="{'class-name' : my_form.$dirty}">
If the div is under a different controller scope than the form, it's still possible, but you'll have to use events or a service to municate between the two controllers.
Coffee kicking in now. Seeing that you do want to municate between the controllers, you can use the $watch technique in the other answer to see that a model has changed (because a $watch won't work on a form state) and then use a service or $broadcast/$emit to set a var in the other controller.
A Parent Controller cannot tell when a model inside the Child Controller changes without using $watch.
(In this case, the model being watched is not too big. However, its worthy to note what the doc reads: "To save the value of the object for later parison, the angular.copy function is used. It also means that watching plex options will have adverse memory and performance implications.")
There is an easier way to do what you want without using $watch:
testapp.controller("ControllerA", function($scope){
$scope.boolUpdatesMade = false;
$scope.updateForm = function(){
$scope.boolUpdatesMade = true;
}
}
testapp.controller("ControllerB", function($scope){
$scope.save = function(){
if($scope.editForm.$dirty){
// dont update the parent's model inside the child
// instead have the parent's method do that
$scope.updateForm();
}
}
}
Hope this helps.