My goal is to modify a CSS style whenever a button is clicked. In order to achieve this, I have implemented a JavaScript function that creates a new class for CSS along with several other functionalities. Here's how the JS function currently appears:
scope.dropChange = function(dropValue, dataType) {
scope.checkChangeCol = {
'width': '8px;',
'height': '20px;',
'border': 'solid #000;',
'border-width': '0 3px 3px 0;',
'padding-left':'0px;',
'margin-left':'13px;',
'-moz-transform': 'rotate(45deg);',
'-webkit-transform': 'rotate(45deg);',
'-o-transform': 'rotate(45deg);',
'-ms-transform': 'rotate(45deg);',
'margin':'auto;'
}
*I removed unnecessary code. If you suspect that the issue doesn't stem from the class, feel free to include the rest of the function.
The HTML section where this function is utilized looks like this:
<table class=buttons-table>
<tr style="line-height: 100px;">
<td><button type="button" class="btn btn-primary btn-sm" ng-click="dropChange('all')">All</button>
<td><button type="button" class="btn btn-primary btn-sm" ng-click="dropChange('room')">Room</button>
<td><button type="button" class="btn btn-primary btn-sm" ng-click="dropChange('floor')">Floor</button>
<td><button type="button" class="btn btn-primary btn-sm" ng-click="dropChange('building')">Building</button>
</tr>
<tr>
<td><div style="{{checkChangeCol}}" class="checkmark"></div>
<td><div class="checkmark"></div>
<td><div class="checkmark"></div>
<td><div class="checkmark"></div>
</tr>
<tr>
<td>checkChangeCol = {{checkChangeCol}}
</td>
</table>
Upon inspection, it seems like I may have incorrectly formatted the class within the function, causing it not to be applied even though the data is present. I'm uncertain about the correct way to rectify this issue.