选中时AngularJS复选框模型不更新答案

【问题标题】：AngularJS checkbox model does not update when checked选中时AngularJS复选框模型不更新
【发布时间】：2017-03-13 14:17:55
【问题描述】：

当我使用 Angular 1.6 时，会在页面加载时选中一个复选框，但是当我单击该复选框时，复选框模型不会更新。为什么？

代码：

  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>

【问题讨论】：

您能否详细说明您想要实现的目标。
你的问题不成立

标签： javascript angularjs checkbox

【解决方案1】：

你需要删除

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

正如你在控制器中定义的那样

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

所以默认情况下复选框将被选中。现在，当您选中或取消选中复选框时，值将相应更新。问题是当您给 ng-checked="obj.C_DJB.VAL=='1'" 时，无论您勾选还是取消勾选复选框，复选框的值始终保持为 1。

【讨论】：

【解决方案2】：

当您取消选中复选框时，正在打印的值从 1 变为 0，这意味着模型正在正常更新。

【讨论】：

【解决方案3】：

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>

【讨论】：

【解决方案4】：

  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>

【讨论】：