时间戳

首页 > 解决方案 > ng-required 将复选框从 false 更改为 undefined

angularjs - ng-required 将复选框从 false 更改为 undefined

问题描述

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

ng-model我有一个使用、ng-required和的复选框输入的输入ng-change

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

同样当ng-required表达式切换时；也会在undefined和falseng-model之间反弹，这反过来会导致触发。ng-change

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

下面的简单片段显示了我遇到的问题。我在示例中输入了一个文本，看看它是否做了同样的事情。当用户输入一个字符串然后删除它时，它似乎做同样的事情......

这个问题与文本输入无关......我最惊讶的是false值在trueng-required时不是有效的复选框值。

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>

标签： angularjs

解决方案

归功于这个 SO 问题/答案：未选中时复选框输入未定义 - AngularJS

您需要添加ng-model-options.

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

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

推荐阅读