CODEWITHSUNDEEP
javascriptangularjscheckbox
Aviade
Aviade

Reputation: 2097

Angular checkbox is not refreshed but the behaviour occures

I created an Angular app. In my app I have a checkbox. By checking the checkbox I add or remove shapes.

<div class="checkboxAndLabel">
    <input type="checkbox" id="{{shape.id}}" name="checkbox"
       ng-model="shape.isSelected" ng-click="controller.addOrRemoveShape(shape)"/>
    <label for="{{shape.id}}"></label>
</div>

The function:

myApp.controller('Controller', [ function(){
   this.addOrRemoveShape = function(shape){
        if (shape){
            var isSelected = shape.isSelected;
            if (isSelected === true){
                //ADD SHAPE
            }
            else{
                //REMOVE SHAPE
             }
     }
     ....

This function works perfect. If I put a breakpoint - when I will click on the checkbox I will go to this function.

In another place I added a button. When a user clicks on the button some shapes have to be added and of course the checkboxes have to be checked. 

this.showOrHidePredefinedShapes = function (layer){
    var shapes = layer.shapes;
    for (var i .... shapes.length){
       var shape = shapes[i];

       shape.isSelected = true;
       that.addOrRemoveShape(shape);
    }
}

It is working. The shapes are drawn and the checkboxes are checked. However, when I click on the checkbox for the specific selected shapes in order to uncheck them the shape is removing but I can't enter into the breakpoint and the checkbox is still stayed checked. I don't understand why....

Upvotes: 0

Views: 59

Answers (1)

idan
idan

Reputation: 484

I'll try to offer somewhat different approach: ng-repeat all shapes on layer and add ng-if on shapes by their isSelected property. 

<div class="layer">
    <div class="shapes" ng-repeat="layer.shapes">
        <div class="shape" ng-if="shape.isSelected">
            <!-- render the shape -->
        </div>
    </div>
</div>

Upvotes: 0

Related Questions