One challenge I am facing is with a checkbox that saves its value and title in the local storage when clicked. This checkbox is located within a div, and I want the checkbox value to change whenever any part of the div is clicked. Despite my efforts, I have not been able to achieve this yet. Below is the current state of my code:
<div class="grid-menu">
<div class="centering-and-alignment" ng-repeat="row in items | partition:3">
<div class="grid-menu-item list__item list__item--tappable" ng-repeat="item in row">
<label class="checkbox">
<input type="checkbox" ng-model="item.value" name="item.title" ng-change="SaveCategories()">
<div class="checkbox__checkmark"></div>
</label>
<ons-icon icon="{{item.icon}}"></ons-icon>
<div class="grid-menu-item-label">{{item.title}}</div>
</div>
</div>
</div>
I attempted changing
<div class="grid-menu-item list__item list__item--tappable" ng-repeat="item in row" >
to
<div class="grid-menu-item list__item list__item--tappable" ng-repeat="item in row" ng-click="item.value = !item.value" >
This modification did alter the checkbox value upon clicking, but it failed to store the values in local storage. Consequently, all checkboxes are unchecked when the page is reopened.
While searching for solutions, I found related queries, but they did not pertain to using local storage.