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

Question

将选择列表绑定到布尔值时，任何人都可以向我解释以下奇怪的绑定/验证行为吗？

选择“是”（真）按预期工作。选择“否”（假）显然不会：

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指令，允许错误
3. 绑定到其他东西（1和0或你提到的“真”和“假”）

---

另请注意，您可能希望添加一个空选项值，以便第一项在您选择后不会说“是”：

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