Hey there, I've encountered an issue with my code. Everything works smoothly when toggling the checkbox using ng-click and dynamically updating it based on input numbers in the input tag through $scope.$watch(). However, when I try to uncheck the 'Shopping' label's checkbox using the 'toggleCheckBox()' function after entering numbers, the ng-class doesn't seem to work properly. Even though $scope.$watch() displays "Hello World!", it fails to initialize $scope.checkShopping = true. Any ideas on what could be causing this problem? Here's the code. Appreciate your assistance!
$scope.toggleCheckbox = function (mainModel, subModel) {
var index = $scope[mainModel].indexOf(subModel);
if (index >= 0) {
$scope[mainModel].splice(index, 1);
} else {
$scope[mainModel].push(subModel);
}
};
$scope.$watch('Shopping',function(){
if($scope.Shopping > 0){
$scope.checkShopping = true; //this code is not working on 2nd input. The ng-class is not setting to 'TRUE'
console.log("Hello world!");
}
});.checkListHolder {
width: 100%;
display: block;
overflow: hidden;
}
.checkListHolder > li {
display: inline-block;
width: 100%;
float: left;
overflow: hidden;
padding: 5px 0;
}
.checkedListItem .checkboxList {
background-image: url(../images/form-icons/checkbox-on.png);
}
.checkboxList {
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-position: center;
background-image: url(../images/form-icons/checkbox-off.png);
margin: 0 10px 0 0;
cursor: pointer;
}
.checkboxLabel {
width: auto;
float: left;
overflow: hidden;
color: #FFF;
font-size: 14px;
font-family: "Open Sans", sans-serif!important;
}<li ng-class="{checkedListItem : checkShopping == true}">
<div class="checkboxList" ng-click="toggleCheckbox('PleasureVacationList','Shopping')"> </div>
<div class="checkboxLabel">Shopping</div>
</li>
<li>
<input type="number" ng-model="Shopping">
</li>Any insights on what might be causing this issue? Thank you for your help