TypeError: Cannot assign to read only property 'checked' checkbox

Question

I have the following checkbox which i filter, but when i delete the filter the checkboxes are lost. I understand why - but Angular won't let me attach the checked value to my ng-model because it is read only .

HTML :

<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="entity.checked"
                   ng-change="getEntityFromModal(entity, entity.checked)" />
            <a>{{entity}}</a>
        </label>
    </div>
</div>

I'm trying to pass the entity.checked value to a function, I'm not even sure if it evaluates to truthy if checked or falsey if not, but the error occurs before this, it simply won't let me attach checked to entity .

plunker https://plnkr.co/edit/2ptIAdOyaIw8mGqpU7Cp?p=preview - open up console and try to check a box.

Answer 1

You will need to create the property in model that you are binding the view with.

edit the $scope.entityArray as below:

$scope.entityArray = [{'val':11,'checked':false},{'val':22,'checked':false},{'val':33,'checked':false}];