Let's talk about this div:
<div ng-if="myCheck">
content
</div>
In my AngularJs controller, I am controlling the value of myCheck which determines whether or not the div is displayed. By default, myCheck is set to false, hiding the div element.
When myCheck is changed from false to true due to some action on the page, the div appears as expected.
The issue arises when setting myCheck back to false after it has been shown once. Instead of hiding the div, multiple copies of the same div appear each time myCheck is toggled between true and false.
This behavior was not present in version 1.0.8 but occurs in all newer versions. What could be causing this and how can it be resolved?
This is how the conditionals are updated in the controller:
$scope.$watch('form.myValue', function (newVal, oldVal) {
if (typeof newVal != 'undefined') {
switch (newVal.code) {
case "case1":
$scope.myCheck1 = true;
$scope.myCheck2 = false;
$scope.myCheck3 = false;
break;
case "case2":
$scope.myCheck2 = true;
$scope.myCheck1 = false;
$scope.myCheck3 = false;
break;
case "case3":
$scope.myCheck3 = true;
$scope.myCheck1 = false;
$scope.myCheck2 = false;
break;
}
}
}, true);
A multiselect dropdown box updates form.myValue, triggering the switch statement based on the selected value.