ng-обязательное изменение флажка с false на undefined

Question

Я уже некоторое время стучал головой об этом.

У меня есть введенный флажок, используя ng-model, ng-required и ng-change

Когда я снимаю флажок, я ожидаю, что ng-model будет установлен на false , но на самом деле он установлен на undefined

Также, когда переключается выражение ng-required; ng-model также отскакивает между undefined и false , что, в свою очередь, вызывает срабатывание ng-change.

Мой действительный код ng-change выполняет некоторый код, который я не хочу запускать несколько раз.

Простой фрагмент ниже показывает, с чем я сталкиваюсь. Я бросил текстовый ввод в пример, чтобы увидеть, сделал ли он то же самое. Похоже, он делает то же самое, когда пользователь вводит строку, а затем удаляет ее ...

Этот вопрос не касается ввода текста ... Меня больше всего удивляет, что значение false не является допустимым значением флажка, если ng-required равно 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

Кредит идет на этот SO вопрос / ответ: Когда флажок не установлен, флажок не определен - AngularJS

Вам нужно добавить ng-model-options.

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

Обычно я отмечал бы это как дубликат, но ответ в ссылке не был принят, поэтому может быть не очевидно, что это работает.