How to maintain a "checked" checkbox after filtering

Question

<div ng-repeat="post in posts | filter:{components:component} | filter:{classification:class}:true">
     <ul>
          <div class="selected-{{'{{charter.selected}}'}}" ng-hide="post.charters.length <= 0" ng-repeat="charter in post.charters">
               <input type="checkbox" ng-model="charter.selected" ng-change="addSelectedCharters(post, charter)">
                    {{'{{charter}}'}}
          </div>
     </ul>
</div>

When I filter, all checkboxes that were previously checked are no longer. How can I resolve them? Thanks!

Answer 1

I suggest you create a property in your items, which could be:

<div ng-repeat="post in posts | filter:{components:component} | filter:{classification:class}:true">
     <ul>
          <div class="selected-{{'{{charter.selected}}'}}" ng-hide="post.charters.length <= 0" ng-repeat="charter in post.charters">
               <input type="checkbox" ng-model="post.selected" ng-change="addSelectedCharters(post, charter)">
                    {{'{{charter}}'}}
          </div>
     </ul>
</div>

The difference is here ng-model="post.selected".