Angular.js : checkbox is not checked by the user but I need ng-change

Question

I have a custom jquery-plugin that will hide the real checkbox and show an enhanced component instead of the real one.

for this code

<label for="local">
  <input type="checkbox" ng-model="value" ng-change="filterByCoursePlace('test')"  name="local"  id="local"><span>Local</span>
</label>

The plug-in generates this code ( it adds a div with on top of the checkbox )

<label for="local">
  <div class="jcf-class-ng-pristine jcf-class-ng-valid chk-area chk-unchecked chk-focus"><span></span></div>
  <input type="checkbox" ng-model="value" ng-click="filterByCoursePlace('test')" name="local" id="local" class="ng-pristine ng-valid"><span>Local </span>
</label>

the big square is the fake one ( shown to the user ) and the small square is the real one. the real checkbox will be hidden to the user.

enter image description here

The problem is: when I click on the real one ng-change works But when I click on the fake one ng-change does not work although the real one gets checked too.

Are you using the actual jQuery plugin or are you mimicking its functionality via direct markup or a directive? — Brocco, Apr 11 '14 at 10:54
why do you need to hide the real checkbox and show an enhanced component instead of the real one. — Nidhish Krishnan, Apr 11 '14 at 10:54
@Brocco I am using the actual jquery plugin. for the select and radio buttton I had no problem only with checkbox the bug appears — zizoujab, Apr 11 '14 at 13:07
This seems like a basic jQuery plugin, have you considered replicating the logic in a directive? — Brocco, Apr 11 '14 at 13:09
It will be my last shot. because the jquery code is a little big and I am still hoping for finding a quicker way — zizoujab, Apr 11 '14 at 13:12

score 1 · Answer 1 · answered Apr 11 '14 at 11:20

1

How much can you change the jQuery plugin? The generated code has an ng-click="filterByCoursePlace('test'), that's why if you click on the real one works. The quickest way to do what you want is to remove every ng-change/ng-click add in your controller a watch:

$scope.$watch('value', function(newVal, oldVal) {
    filterByCoursePlace('test')
});

Or if you can change how the plugin generates the code you could add the ng-click to the fake checkbox instead of the real one. Anyway, if you want to trigger filterByCoursePlace also when value is changed by another function (like a 'resetFilters' button), I would go with the $scope.$watch way.

answered Apr 11 '14 at 11:20

Polmonite

933
6
13

I have tried that approach ( the $watch approach ) , the same thing , if I click on the real checkbox the `ng-modal` variable gets updated , If I click on the fake one nothing happends – zizoujab Apr 11 '14 at 13:10
Without code it's a bit difficult; anyway I suppose that the problem it's in how the jQuery plugin has been integrated in angularjs. There are a lot of tutorial on how to do that with simple directives (like: http://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/ ). – Polmonite Apr 11 '14 at 13:46
thank you for the link :) appreciate you effort to help – zizoujab Apr 11 '14 at 13:57

score 0 · Accepted Answer · answered May 15 '14 at 08:52

0

I ended up showing the real checkbox on top of the fake one and make it invisible with css( opacity = 0)

That's not the perfect solution but it worked.

answered May 15 '14 at 08:52

zizoujab

7,603
8
41
72

Angular.js : checkbox is not checked by the user but I need ng-change

2 Answers2