When I click on the checkbox input, nothing happens the first time. But when I click it again the function in ng-change() works as expected.
I am confused. Am I missing something?
<tr dir-paginate="product in kitchenProducts | itemsPerPage: 10">
<td>
<img ng-src="{{ product.images.full_size }}" class="table-thumbnail-product" alt="">
</td>
<td>{{ product.name }}</td>
<td>Sandwich</td>
<td>{{ product.price }}</td>
<td>
<label class="toggle toggle-balanced">
<input type="checkbox"
ng-model="productToggleButton"
ng-checked="product.is_enabled"
ng-change="toggleProductEnable(product.is_enabled,product.id)" value="{{ product.id }}"
class="">
<div class="track">
<div class="handle"></div>
</div>
</label>
</td>
</tr>
JavaScript Code:
$scope.toggleProductEnable = function(productSelected, productId) {
console.log(productId);
if (productSelected) { //If it is checked
alert('checked');
} else {
alert('unchecked');
}
}
Can someone help me figure out why this is happening?
Thank you!