角度 ng-model 不适用于输入类型 = 复选框 [重复]

Question

我的代码是这样的： html:

<input type="checkbox" ng-model="cb1"> You have discussed the amount, frequency and term applicable to the payment schedule with your customer and they have agreed.

获取复选框值

console.log('checkbox:', $scope.cb1);

结果总是undefined，不管我是否勾选。

但如果我的代码更改为

<input type="checkbox" ng-model="cb1.value"> You have discussed the amount, frequency and term applicable to the payment schedule with your customer and they have agreed.

并初始化变量：

$scope.cb1 = {value: true};

然后我可以得到复选框值

console.log('checkbox:', $scope.cb1.value);

有人能告诉我为什么吗？谢谢

Answer 1

.directive('checkbox', ['$timeout', function ($timeout) {
    return {
        restrict: 'C',
        link: function (scope, element, attrs) {
            if (element.is('.ui')) {
                $timeout(function () {
                    $(element).checkbox();
                    element.find('input[type="checkbox"]').on('change', function () {
                        var checkbox = angular.element(this);
                        eval('scope.' + checkbox.attr('ng-model') + '=' + checkbox.is(':checked'));
                    });
                }, 0);
            }
        }
    };
}])

Answer 2

问题是您定义复选框的范围与您执行 console.log 的范围不同。

所以复选框正在更新其他范围内的模型。 而且您正在从其他范围记录模型，因此存在差异。 在这样的 HTML 中：

<div ng-controller="MyCtrl">
    <input type="checkbox"  ng-change="change()" ng-model="myCheck"> You have discussed the amount, frequency and term applicable to the payment schedule with your customer and they have agreed.
  </div>

在 JS 方面：

myApp.controller('MyCtrl', ['$scope', function($scope) {
  $scope.myCheck = true;
  $scope.change = function() {
    console.log("hello", $scope.myCheck);
  };
}]);

查看我的工作演示 here。

$scope.cb1 = {value: true}; 工作的原因是因为现在 cb1 是一个对象，并且当存在复选框的子范围扩展父范围时。它获取$scope.cb1 对象的引用（浅克隆）。 因此，子作用域（对于 cb1）的变化反映在父作用域也你在哪里做console.log。

好吧，当您在父作用域中使用 $scope.cb1 = true 时。 子作用域获得它的克隆，因此变量的父子作用域会有所不同。

希望这能澄清您的问题。

Answer 3

你的代码和下面一样吗？

控制器代码：

$scope.cb1 = false; // initialise it to `true` if you need

HTML 代码：

<input type="checkbox" ng-model="cb1"> You have discussed the amount, frequency and term applicable to the payment schedule with your customer and they have agreed.
{{ cb1 }} <!-- check the value of `$scope.cb1` realtime -->

编辑：

要在浏览器控制台中检查cb1 的值，请执行以下操作，

HTML 代码：

<input type="checkbox" ng-model="cb1" ng-change="changeCheckbox()"> You have discussed the amount, frequency and term applicable to the payment schedule with your customer and they have agreed.

控制器代码：

$scope.cb1 = false; // initialise it to `true` if you need
$scope.changeCheckbox = function() {
    console.log("checkbox: ", $scope.cb1);
}

Answer 4

有效的方法是将输入绑定到对象而不是原语。

<!-- Partial -->
<input type="checkbox" ng-model="someObject.someProperty"> Check Me!

// Controller
 $scope.someObject.someProperty = false

Answer 5

用<input type='"checkbox".. 实现ng-model 的正确方法是：

<input type="checkbox" ng-model="checkboxModel.value1">

这里的checkboxModel 是Json，其结构如下：

 $scope.checkboxModel = {
   value1 : true,
   value2 : 'YES'
 };

你将无法通过写ng-model="checkboxModel"来绑定checkboxModel

Answer 6

我认为问题在于您的日志记录机制：

试试这个，看看问题是否解决

<input type="checkbox" ng-model="cb1" ng-change="recordLog()"> You have discussed the amount, frequency and term applicable to the payment schedule with your customer and they have agreed.

在你的 controller.js 中

$scope.recordLog = function() {
    console.log("checkbox:" + $scope.cb1);
}

P.S.：这只是我的猜测。实际问题可能有些不同。

编辑

当然你的 js 有问题
使用

console.log("checkbox:" + $scope.cb1.value);

而不是

console.log('checkbox:", $scope.cb1.value);