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

前端之家收集整理的这篇文章主要介绍了angularjs – 将选择列表绑定到布尔值时的奇怪绑定/验证行为前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
将选择列表绑定到布尔值时,有人能解释一下以下奇怪的绑定/验证行为吗?

选择“是”(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(布尔值,而不是字符串).

谢谢你的帮助!

解决方法

看起来必需的指令不会将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而不是必需.这允许您选择自定义的必需表达式,如:ng-required =“!(myModel == true || myModel == false)”.以Here is a fiddle为例.
>您可以创建自己的修改后的必需指令,允许使用false
>绑定到别的东西(1和0,或者像你提到的“真”和“假”)

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

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

猜你在找的Angularjs相关文章