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 source link：

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

以下是一些选项：

使用ngRequired代替required。这使您可以选择自定义的必需表达式，如：ng-required="!(myModel == true || myModel == false)"。 Here is a fiddle举了一个例子。
您可以创建自己的修改后的required指令，允许使用false
绑定到别的东西（1和0，或者像你提到的“真”和“假”）

另请注意，您可能需要添加一个空选项值，以便第一项选择后不会显示“是”：

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

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

1 个答案: