CODEWITHSUNDEEP
javascripthtmlangularjscheckbox
notAChance
notAChance

Reputation: 1430

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

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.

Upvotes: 0

Views: 456

Answers (1)

Taran J
Taran J

Reputation: 805

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}];

Upvotes: 1

Related Questions