Why the model value is wrong with checkbox in AngularJS?

Question

I am experiencing a really strange error. I have a checkbox in my view whose has a directive to show the value of it when it changes. In FF it works well showing the right values. But in other browsers, like Chrome, it shows the the opposite response, i.e., if is checked, should show 'true', but shows 'false'!

In my view:

<input type="checkbox" id="accept" name="accept" ng-model="accept" d6 />

My directive:

validation.directive('d6', ['$parse', function($parse){
   return {
      require: 'ngModel',
      restrict: 'A',
      link:  function link(scope, elem, attrs, control) {

         elem.on('change', function(){

             console.log(control.$modelValue);

         });

      }
 }
}]);

enter image description here

Can you supply a JS Fiddle or some more code so we don't have to rewrite everything from scratch. — Phill
– Phill, Commented Mar 9, 2014 at 15:05

PrimosK · Accepted Answer · 2014-03-09 15:39:45Z

2

Angular way of doing this would be using $watch:

var myApp = angular.module('myApp',[]);

myApp.directive('d6', function(){
   return {
      require: 'ngModel',
      restrict: 'A',
      link:  function link(scope, elem, attrs, ngModel) {               
          scope.$watch(
              function () {
                  return ngModel.$modelValue;
              }, function(newValue) {
                  console.log(newValue);
              }
          );

      }
   }
});

There is working JSFiddle.

edited Mar 9, 2014 at 15:39

answered Mar 9, 2014 at 15:29

PrimosK

13.9k10 gold badges62 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

atondelier · Accepted Answer · 2014-03-09 15:30:59Z

2

Angular code

Found in the angular code in the checkboxInputType function used for all input[type=checkbox] with a ngModelController:

element.on('click', function() {
    scope.$apply(function() {
        ctrl.$setViewValue(element[0].checked);
    });
});

This code updates the ngModelController with the boolean as view value, instantly piped into provided parsers, thus setting the model value.

Click and change events

You are listening to the change event, which is triggered before the click event in Chrome and the opposite in firefox. That is the whole problem.

Solutions

The jQuery solution is to listen to the click event too.

The Angular solution would be to watch the model value directly.

answered Mar 9, 2014 at 15:30

atondelier

2,43417 silver badges11 bronze badges

Comments

Shomz · Accepted Answer · 2014-03-09 15:48:45Z

1

Either what the two answers said, or you can simply watch for the changes in $scope.accept (which is your model):

$scope.$watch('accept', function(){
    $scope.value = $scope.accept; 
});

See it here: http://jsfiddle.net/A8Vgk/307/. This way seems the most natural to me.

answered Mar 9, 2014 at 15:48

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

1 Comment

PrimosK Over a year ago

The only drawback of this approach is that directive is usable only when scope variable name is accept.

Collectives™ on Stack Overflow

Why the model value is wrong with checkbox in AngularJS?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related