Question

我已经在这个头上敲了一段时间。

我有一个使用ng-model，ng-required和ng-change

输入的复选框

当我取消选中一个复选框时，我希望ng-model被设置为 false ，但实际上它被设置为 undefined

当ng-required表达式切换时； ng-model还会在 undefined 和 false 之间跳动，从而导致ng-change触发。

我实际的ng-change代码执行了一些我不想多次运行的代码。

下面的简单代码段显示了我遇到的问题。我在示例中添加了文本输入，以查看其是否执行了相同的操作。当用户输入一个字符串然后将其删除时，它似乎在做同样的事情。

此问题与文本输入无关 ...当ng-required为<时， false 值不是有效的复选框值，我感到非常惊讶strong> true 。

var app = angular.module('example', []);

app.controller('controller',['$scope', function($scope){
  $scope.inputModel = {
    isSelected: undefined,
    textInput: undefined
  };
	
	$scope.onChangeCounter = 0;

	$scope.requiredModel = true;

  $scope.resolveCheckboxInput = function() {
    if (typeof $scope.inputModel.isSelected === "undefined") {
      return "I am undefined"
    }
    return "I am " + $scope.inputModel.isSelected
  };

  $scope.resolveTextInput = function() {
    if (typeof $scope.inputModel.textInput === "undefined") {
      return "I am undefined"
    }
    return "I am " + $scope.inputModel.textInput
  };
  
  $scope.onChangeCallback = function() {
  	$scope.onChangeCounter++;
  };
  
  $scope.isRequired = function() {
  	return $scope.requiredModel;
  };
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>


<div ng-app="example">
    <ul>
    <li> Set Checkbox Input to TRUE</li>
    <li> Set Checkbox Input to FALSE</li>
    <li> Toggle ng-required</li>
    <li> Checkbox Input is cleary affected</li>
    </ul>
    <div ng-controller="controller">
      <label>
        <input type="checkbox"
          ng-required="isRequired()"
          ng-change="onChangeCallback()"
          ng-model='inputModel.isSelected'  />
      Checkbox Input
      </label>
      <br><br>
      <div>
        <b>Checkbox Input:</b> {{resolveCheckboxInput()}}
      </div>
      <br><br>
      <label>
        <input type="text"
          ng-required="isRequired()"
          ng-model='inputModel.textInput'  />
      Text Input
      </label>
      <br><br>
      <div>
        <b>Text Input:</b> {{resolveTextInput()}}
      </div>
      <br><br>
        <label>
          <input type="checkbox"
              ng-model='requiredModel' />
          ng-required
        </label>
      <br><br>
      <div>
        <b>Checkbox Input ng-change Counter:</b> {{onChangeCounter}}
      </div>
    </div>
</div>

Answer 1

信用转到该特殊问题/答案：Checkbox input undefined when unchecked - AngularJS

您需要添加ng-model-options。

<input type="checkbox"
    ng-required="isRequired()"
    ng-change="onChangeCallback()"
    ng-model='inputModel.isSelected'
    ng-model-options="{ allowInvalid: true }" />

我通常将其标记为重复，但是链接中的答案未被接受，因此可能并不明显。

ng要求将复选框从false更改为undefined

1 个答案: