将选择列表绑定到布尔值时的奇怪绑定/验证行为

Question

将选择列表绑定到布尔值时,有人能解释一下以下奇怪的绑定/验证行为吗？

选择"是"(true)按预期工作.选择"否"(假)显然不会:

JSFIDDLE: http ://jsfiddle.net/mhu23/ATRQG/14/

$scope.trueFalseOptions = [{
    value: true,
    label: 'Yes'
}, {
    value: false,
    label: 'No'
}];

<select name="parameter" required ng-model="myModel" ng-options="x.value as x.label for x in trueFalseOptions"></select>

难道我做错了什么？我希望能够从下拉列表中选择"是"或"否".选项的值应为true或false(布尔值,而不是字符串).

谢谢你的帮助!

Answer 1

看起来该required指令不考虑false有效值并将模型值设置为undefined:

Github源码链接:

  var validator = function(value) {
    if (attr.required && (isEmpty(value) || value === false)) {
      ctrl.$setValidity('required', false);
      return;
    } else {
      ctrl.$setValidity('required', true);
      return value;
    }
  };

以下是一些选项:

1. 用ngRequired而不是required.这允许您选择自定义的必需表达式,如:ng-required="!(myModel == true || myModel == false)".这是一个例子的小提琴.
2. 您可以创建自己的修改required指令,允许为false
3. 绑定到别的东西(1和0,或者像你提到的"真"和"假")

另请注意,您可能需要添加一个空选项值,以便第一项在选择后不显示"是":

<select name="parameter" ng-model="myModel" ng-options="x.value as x.label for x in trueFalseOptions">
   <option value=""></option>
</select>