checkbox unchecking itself after angularjs filter applied

Question

This causes the same item to be added to the array - which is used for querying - potentially twice. When the modal is closed and opened again and filtering is not used, everything is fine (this is because my modals are simply within the HTML, I just ng-hide them on click). When an item which has already been added, but its checkmark has been lost due to filtering, is checked again two of the same items are added. When it is unchecked both are removed, unless it is the last item in the array, this cannot be removed (I'm aware this is my slapdash logic). Below is the relevant HTML and JavaScript code (famous last words).

HTML:

<div style="display: inline-block;" ng-controller="modalCtrl">
                <button ng-click="showModal = !showModal">Entities</button>
                <div ng-init="showModal=false">
                    <div class="modal fade in" aria-hidden="false"
                        style="display: block;" ng-show="showModal">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <strong>ENTITIES</strong>
                                <div>
                                    <div>
                                        <input type="text" placeholder="Search" ng-model="simpleFilter">
                                        <button type="button" ng-click="showModal=false">Ok</button>
                                    </div>
                                </div>
                                <br>
                                <div ng-repeat="entity in entityArray | filter:simpleFilter">

                                    <label> <input
                                        style="display: inline-block; margin-top: 5px"
                                        type="checkbox" ng-model="entityChecked"
                                        ng-change="getEntityFromModal(entity, entityChecked)" /> <a>{{entity}}</a>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Modal Controller:

angular.module("app").controller("modalCtrl", ["$scope", "shareDataService", "getDataService", function ($scope, shareDataService,      ngDialog, getDataService) {


$scope.entityArray = shareDataService.getEntityArray();
$scope.depotArray = shareDataService.getDepotArray();

     $scope.getEntityFromModal = function (entity, checked) {
         shareDataService.setModalEntity(entity, checked);
     };

    $scope.getDepotFromModal = function (depot, checked) {
        shareDataService.setModalDepot(depot, checked);
     };

}]);

shareDataService (relevant methods):

angular.module("app").factory("shareDataService", function () {

var entityArrayService = [];
var depotArrayService = [];
var modalEntity = [];
var modalDepot = [];

getEntityArray: function () {
        return entityArrayService;
    },
getDepotArray: function () {
        return depotArrayService;
    },
setModalEntity: function (entity, checked) {
        if (!checked) {
            for (var i = 0; i < modalEntity.length; i++) {
                if (modalEntity[i] === entity) {
                    modalEntity.splice(i, 1);
                }
            }
        } else {
            modalEntity.push(entity);
        }
    },
setModalDepot: function (depot, checked) {
        if (!checked) {
            for (var i = 0; i < modalDepot.length; i++) {
                if (modalDepot[i] === depot) {
                    modalDepot.splice(i, 1);
                }
            }
        } else {
            modalDepot.push(depot);
        }
    },
});

There are other instances when the dataservice methods are called in my main controller, but these are only used for the array's length. So if the checkbox problem is solved everything is solved.

for checkboxes to be retained, your need to save to a model. When angular filters, it creates a child scope for the repeater and your data may be removed in the process. — SoluableNonagon
– SoluableNonagon, Commented Feb 8, 2016 at 17:55
Thanks for your input, if SoluableNonagon's answer works tomorrow (back in work) I won't bother with the plunk, if not I will. — notAChance
– notAChance, Commented Feb 8, 2016 at 18:34
@SatejS since the below answer didn't work - here is a plunker - plnkr.co/edit/2ptIAdOyaIw8mGqpU7Cp?p=preview . It is important you must follow these steps to see problem. 1) search for number "11" using search bar 2)check check box beside "11" 3) delete search "11" and enter search "22". 4) check box beside "22" 5)delete "22" from search. You will then see that 11 remains in the array (output at bottom on page) but its check box is not selected since filtering the list. — notAChance
– notAChance, Commented Feb 9, 2016 at 15:22

SoluableNonagon · Accepted Answer · 2016-02-08 17:59:38Z

1

entityChecked is not declared anywhere in your javascript, so each time you filter, entityChecked is reset, so you need to make the model something that the repeater will see and have access to.

           <!-- entity is now in the created child scope -->
<div ng-repeat="entity in entityArray | filter:simpleFilter">
    <label> <input style="display: inline-block; margin-top: 5px"

         <!-- set the checked value on the 'entity' itself, then it will be  retained -->
         type="checkbox" ng-model="entity.entityChecked"

         ng-change="getEntityFromModal(entity, entityChecked)" /> <a>{{entity}}</a>
    </label>
</div>

answered Feb 8, 2016 at 17:59

SoluableNonagon

11.8k11 gold badges59 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

notAChance Over a year ago

Ah I see, thanks for your input - I'll be trying this tomorrow when I'm back in work.

notAChance Over a year ago

I have tried this and am now getting the following error - TypeError: Cannot assign to read only property 'entityChecked' of V5 at fn.assign .

notAChance · Accepted Answer · 2016-02-16 11:29:51Z

0

Finally have an answer - the array holding my values entityArray needs to be changed into an array holding JSON values, and for each value val there must be a value checked , which is represented by ng-model - in the above case it would be passed to getEntityFromModal(entity, entity.checked).

working plnk - https://plnkr.co/edit/2ptIAdOyaIw8mGqpU7Cp?p=preview

answered Feb 16, 2016 at 11:29

notAChance

1,4304 gold badges19 silver badges52 bronze badges

Collectives™ on Stack Overflow

checkbox unchecking itself after angularjs filter applied

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related