In a specific scenario, I am trying to change the border color from black to red in a div by appending a class using ng-class when clicked.
However, when clicking a button, the modal opens but the class is not being appended as expected.
<div ng-class="{'addBorder':clicked}" class="beforeClicked">
<button ng-click="clickToOpen()">Open Modal</button>
</div>
function MyCtrl($scope, ngDialog) {
$scope.clicked=false;
$scope.clickToOpen = function () {
$scope.clicked=true;
ngDialog.open({ template: 'templateId' });
};
}
.addBorder{
border:1px solid red;
}
.beforeClicked{
width:100px;
height:300px;
border:1px solid black
}
The initial state of the div has a black border. On button click, it should add the class addBorder to turn the border color to red, but this behavior is not working as intended.
I would appreciate any assistance with this issue. Thank you!