CODEWITHSUNDEEP
javascriptjqueryangularjscheckbox
S.Schindi
S.Schindi

Reputation: 43

Angular ng-repeat filter uncheck all Checkboxes after search

I have a problem with my AngularJS ng-repeat filter. When I filter in my ng-repeat with an input field, Angular unchecks all checkboxes automatically.

I would like to select specific categories. It's impossible to list all categories I have (there's over 100), therefore I'm using a search filter.

The "filter" function of angular works, but it unchecks all checkboxes after the search. The boolean of the checkbox should be remain the same.

This is my code:

<div ng-switch-when='e_categories'>
    <div class="chat-search">
        <div class="fg-line">
            <input type="text" class="form-control" ng-model="e_categoriesFilter" placeholder="E-Categories filtern">
        </div>
    </div>
    <div vs-repeat>
        <div class="checkbox m-10" ng-repeat="e_category in e_categories | filter:e_categoriesFilter">
            <label>
                <input type="checkbox" ng-model="eCategoryFilter" ng-click='filterByECategories(e_category)' value='@{{ e_category.id }}'>
                <i class="input-helper"></i>
                @{{ e_category.name }}
            </label>
        </div>
    </div>
</div>

It looks easy, but I cant figure out how to do this.

Upvotes: 1

Views: 1349

Answers (2)

TheRodeo
TheRodeo

Reputation: 465

What needs to change is 

<input type="checkbox" ng-model="eCategoryFilter" ng-click='filterByECategories(e_category)' value='@{{ e_category.id }}'>

to 

<input type="checkbox" ng-model="e_category.checked" ng-click='filterByECategories(e_category)' value='@{{ e_category.id }}'>

By default, e_category.checked will default to false or you can initialize it to false. When the user checks the checkbox, it will be stored as true and so on re-rendering will maintain that state.

Upvotes: 2

Ionut Milas
Ionut Milas

Reputation: 328

When filtering, save all the selected checkboxes into an array and after the rendering iterate that array and re-select the boxes.

Upvotes: 0

Related Questions