单击复选框时，ng-model 值从 false 切换为 undefined 而不是 true

Question

我正在为输入复选框和 ng 模型而苦苦挣扎。 我用 false 初始化我的变量，将其设置为输入复选框上的 ng-model。显示时，值为假。单击复选框后，值将变为 undefined 而不是 true。

这是我的代码：

<div ng-app="app" ng-controller="Controller">
    <input id="check" type="checkbox" ng-model="model.noExpiry" ng-click="model.clickCheck()">Click
    <p>{{model.noExpiry}}</p>
</div>


var module = angular.module("app",[]);

    module.controller("Controller", function ($scope) {
      $scope.model = {};
      $scope.model.noExpiry = false; 

      $scope.model.clickCheck = function(){
        console.log($scope.model.noExpiry);
      }
});

如果我删除 ng-model 并将 model.clickCheck 函数更改为以下内容，它会正确地将变量从 false 更改为 true，反之亦然：

$scope.model.clickCheck = function(){

    if($scope.model.noExpiry) {
        $scope.model.noExpiry = false;
    }
    else {
        $scope.model.noExpiry = true;
    }

    console.log($scope.model.noExpiry);
}

当我用 true 初始化 model.noExpiry 时，该复选框被选中，但是当取消选中并再次选中它时，它变为 false，然后再次变为未定义。

有没有人知道为什么变量没有变为 true 而是变为 undefined？

AngularJs 版本：1.5.5

Answer 1

原因是$scope.model 未定义。因此，$scope.model.noExpiry 属性无效。刚刚在控制器中添加了$scope.model = {}; 以生成有效对象。

请查看最终更新的代码：

var module = angular.module("app",[]);
    
    
    module.controller("Controller", function ($scope) {
      $scope.model = {};
      $scope.model.noExpiry = false;

      $scope.model.clickCheck = function(){
        console.log($scope.model.noExpiry);
      }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Controller">
    <input id="check" type="checkbox" ng-model="model.noExpiry" ng-click="model.clickCheck()">Click
    <p>{{model.noExpiry}}</p>
</div>