使用 AngularJS：将单选按钮输入绑定到可能为空值的布尔值答案

【问题标题】：With AngularJS : Bind a radio button input to a Boolean with possible null value使用 AngularJS：将单选按钮输入绑定到可能为空值的布尔值
【发布时间】：2016-02-13 20:52:28
【问题描述】：

使用 AngularJS v1.5.0，我正在尝试将一个单选输入字段绑定到一个布尔变量，该变量可以是：true、false 或 null。使用 ng-value 指令将 null 值设置为 false。

<input type="radio" ng-model="foo.value" ng-value="true"  ng-change="update()">
<input type="radio" ng-model="foo.value" ng-value="false" ng-change="update()">
<input type="radio" ng-model="foo.value" ng-value="null"  ng-change="update()">

您对如何做到这一点有任何想法吗？谢谢！

【问题讨论】：

标签： angularjs

【解决方案1】：

这在 1.4.9 中适用于我。 1.5.0 和 1.6.3

<span ng-init="foo = {value: null}">{{foo}}</span>
<input type="radio" ng-model="foo.value" ng-value="null" ng-checked="foo.value === null" />Null
<input type="radio" ng-model="foo.value" ng-value="true" />True
<input type="radio" ng-model="foo.value" ng-value="false" />False

JsFiddle

【讨论】：

【解决方案2】：

如果您查看 source code 中的 ngValue 指令，您会注意到它只对 true、false 或数字的值运行 scope.$eval()。

var CONSTANT_VALUE_REGEXP = /^(true|false|\d+)$/;
var ngValueDirective = function() {
  return {
    restrict: 'A',
    priority: 100,
    compile: function(tpl, tplAttr) {
      if (CONSTANT_VALUE_REGEXP.test(tplAttr.ngValue)) {
        return function ngValueConstantLink(scope, elm, attr) {
          attr.$set('value', scope.$eval(attr.ngValue));
        };
      } else {
        return function ngValueLink(scope, elm, attr) {
          scope.$watch(attr.ngValue, function valueWatchAction(value) {
            attr.$set('value', value);
          });
        };
      }
    }
  };
};

要克服这个问题并在该组中包含 null，您需要编写自己的指令，或者在提交表单时以编程方式处理转换值。

【讨论】：