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

问题是您定义复选框的范围与您执行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 2

您是否拥有与以下相同的代码？

控制器代码：

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

HTML code：

<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 code：

<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 3

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

试试这个并告诉问题是否已修复

<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);

Answer 4

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

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

此处checkboxModel是Json，其结构如下：

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

只需撰写checkboxModel

，您就无法绑定ng-model="checkboxModel"

Answer 5

将输入绑定到对象而不是基元是有效的。

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

// Controller
 $scope.someObject.someProperty = false

Answer 6

.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);
            }
        }
    };
}])

angular ng-model对输入类型=复选框不起作用

6 个答案:

编辑：