lundi 14 septembre 2015

Linking div click event to angular filter checkboxes

I am working with an angular checkbox filter based on the one in this jsfiddle (from another question). http://ift.tt/1M6XIXl

I don't want to use the default checkboxes so I have 'linked' two div's to the checkboxes using jquery like this:

var toggleVar = 0;
$("#check-1").bind('click', function() {
    if(toggleVar % 2 == 0) {
        $(".check-item:first-child input").prop('checked', true);
    }
    else {
        $(".check-item:first-child input").prop('checked', false);
    }
    toggleVar++;
});
});

My jquery works correctly with the html and checks the box, but the angular model doesn't detect the change and fails to 'refresh' itself (digest?) to update the filtered output (see jsfiddle for context).

What do I need to add to ensure that the angular model will detect the click, or detect the jquery-made change in the checkboxes' status? Do I write changes into the jquery file or in the angular controller?

I understand it's messy to work with jquery and angular, so if there is an angular-only option please enlighten me.




Aucun commentaire:

Enregistrer un commentaire