I'm encountering an issue with a switch button that is based on an API. Initially, the button changes from "on" to "off" in my view when clicked. However, when I click the button to turn it back "on", it doesn't work. What's even more peculiar is that after clicking it once, the button becomes unresponsive. It's quite perplexing. Does anyone have a solution for this? Your help would be greatly appreciated.
Controller :
This controller is responsible for displaying whether the isactive API is turned on or off, and it displays accordingly based on isactive.
$scope.result[item._id] = {
item : item,
active : item.active,
btn_label : item.active === 0 ? "On" : "Off"
};
As a result, I have included the btn_label in the view like this:
<tbody ng-repeat="data in result">
<tr>
<td>
{{ startnumber + $index + 1 }}
</td>
<td>
{{ data.item._id }}
</td>
<td>
{{ data.item.title }}
</td>
<td>
{{ data.item.category.label }}
</td>
<td>
{{ data.item.user.name }}
</td>
<button class="btn btn-success" ng-click="FiturThread(data.item)"><i class="fa fa-toggle-on"></i> {{ data.btn_label }}</button>
</tbody>
My assumption was to simply change the btn_label in the $scope using FiturThread, but it did not work as expected.
$scope.FiturThread = function(data) {
if(data.btn_label === 0){
data.btn_label = "Off";
}else{
data.btn_label = "On";
}
};
If you have any insights or solutions, please share them with me. Thank you!