AngularJS checkbox model does not update when checked

Question

When I use Angular 1.6, a checkbox is checked on page load, but when I click the checkbox the checkbox model is not update. Why?

Code:

  var app = angular.module("demo",[]);
  app.controller("ctrl",["$scope",function($scope){
    var data = {
      C_DJB:{VAL:'1'}
    }
      $scope.obj = data;

  }])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <meta name="description" content="test">
        <meta name="author" content="">
        <title>Page Title</title>

    </head>
    <body ng-app="demo" ng-controller="ctrl">
        <h1>Body</h1>
        <input  type="checkbox" ng-model="obj.C_DJB.VAL" ng-true-value="1" ng-false-value="0" ng-checked="obj.C_DJB.VAL=='1'" /> <br/>
        <input type="checkbox" ng-model="obj.C_DJB.VAL" ng-true-value="1" ng-false-value="0" ng-checked="obj.C_DJB.VAL=='1'" /> <br/>
        {{obj.C_DJB.VAL}}
 

    </body>
</html>

Can you perhaps give more details as to what you would like to achieve. — onmyway
– onmyway, Commented Mar 13, 2017 at 5:49

AKSHAY JAIN · Accepted Answer · 2017-03-13 06:15:17Z

1

You need to remove

ng-checked="obj.C_DJB.VAL=='1'"

As you have defined in the controller

 var data = {
  C_DJB:{VAL:'1'}
}

so by default the checkbox will be checked. Now when you check or uncheck the checkbox the value will get updated accordingly. The problem is when you are giving ng-checked="obj.C_DJB.VAL=='1'" the checbox value always remains 1 whether you tick or untick the checkbox.

answered Mar 13, 2017 at 6:15

AKSHAY JAIN

2461 silver badge6 bronze badges

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

Comments

Ibrahim Maher · Accepted Answer · 2017-03-13 06:06:23Z

1

The value being printed is changing from 1 to 0 when you untick the checkbox, which means the model is getting updated just fine.

answered Mar 13, 2017 at 6:06

Ibrahim Maher

1039 bronze badges

Comments

陈荣凯 · Accepted Answer · 2017-03-13 06:16:06Z

var app = angular.module("demo",[]);
  app.controller("ctrl",["$scope",function($scope){
    var data = {
      C_DJB:{VAL:'1'}
    }
      $scope.obj = data;

  }])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <meta name="description" content="test">
        <meta name="author" content="">
        <title>Page Title</title>

    </head>
    <body ng-app="demo" ng-controller="ctrl">
        <h1>Body</h1>
        <input  type="checkbox" ng-model="obj.C_DJB.VAL" ng-true-value="1" ng-false-value="0" ng-checked="obj.C_DJB.VAL=='1'" /> <br/>
        <input type="checkbox" ng-model="obj.C_DJB.VAL" ng-true-value="1" ng-false-value="0" ng-checked="obj.C_DJB.VAL=='1'" /> <br/>
        {{obj.C_DJB.VAL}}
 

    </body>
</html>

onmyway · Accepted Answer · 2017-03-13 06:17:55Z

  var app = angular.module("demo",[]);
  app.controller("ctrl",["$scope",function($scope){
    var data = {
      C_DJB:{VAL:'0'}
    }
      $scope.obj = data;

  }])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <meta name="description" content="test">
        <meta name="author" content="">
        <title>Page Title</title>

    </head>
    <body ng-app="demo" ng-controller="ctrl">
        <h1>Body</h1>
        <input  type="checkbox" ng-model="obj.C_DJB.VAL" ng-true-value="1" ng-false-value="0"" /> <br/>
        <input type="checkbox" ng-model="obj.C_DJB.VAL" ng-true-value="1" ng-false-value="0"" /> <br/>
        {{obj.C_DJB.VAL}}
 

    </body>
</html>

Collectives™ on Stack Overflow

AngularJS checkbox model does not update when checked

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related