I am dealing with an HTML button
<button id="postChanges" ng-show="changes.available" data-ng-click="postChanges()">Save</button>
and a controller specifically for this view
myApp.controller('myController', ['$scope', function ($scope) {
var changes = {
available : false
}
$scope.postChanges = function () {
console.log('changes before: ' + changes.available);
if (changes.available) {
changes.available = false;
}
else {
changes.available = true;
}
console.log('changes after: ' + changes.available);
}
}]);
I am struggling to make the button visible when changes.available is true and hide it when it is false, but for some reason, it is not working as expected. I have tried different approaches such as simply using boolean values like changes = true / changes = false, using data-ng-show instead of ng-show, '!' before the value in ng-show ("!changes.available" or "ng-show"=!changes"), but none of these solutions seem to be working. I have checked the changes value in the console and it appears to be correct, so I suspect the issue may lie with the button attribute itself, but I can't figure out why :(