Question

我正在努力使用输入复选框和ng-model。我将我的变量初始化为false，将其设置为输入复选框上的ng-model。显示时，值为false。单击复选框后，值将更改为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，然后再次变为undefined。

有没有人知道为什么变量不会变为true而是变为未定义？

AngularJs版本：1.5.5

Answer 1

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

请查看最终更新的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: