In my application I have a checkbox list item, the data for the list items is from a api, I want to be able to user to click on the checkbox they want and that gets stored in localStorage, if I do it with the code below, it checks all the options but it does store it localy, but I want the user to be able to click on the checkbox they want and not have all the checkboxes checked. The code is:
HTML:
<div ng-repeat='item in posts'>
<ul class="list">
<li class="item item-checkbox" ng-repeat='tag in item.tags'>
<label class="checkbox">
<input type="checkbox" ng-model="option.city">
</label>
<p ng-bind-html="tag.title"></p>
</li>
</ul>
</div>
APP.JS
$localStorage.$default({
option: {
'city':true
}
});
$scope.option = $localStorage;
})
Any ideas?
The problem is with the below line
<input type="checkbox" ng-model="option.city">
Every checkbox DOM element has the same ng-model value bound to it.
You should assign a unique value to each checkbox. You can use $index prop of ng-repeat.
Example:
<li class="item item-checkbox" ng-repeat='tag in item.tags track by $index'>
<label class="checkbox">
<input type="checkbox" ng-model="option.city[$index]">
</label>
<p ng-bind-html="tag.title"></p>
</li>