javascript - AngularJS - ng-option 下拉列表在选择 False 时不设置 ng-model 值

Question

我有一个 <select>使用 ng-options 的元素生成选择列表并希望将选择的值设置为 ng-model 的值.这是我的 HTML:

<td style="text-align:center">
    <ng-form name="IsTobaccoForm">
        <select name="Input" required ng-model="dep.IsTobacco" ng-options="item.value as item.text for item in yesNoList"></select>{{dep.IsTobacco}}
        <span class="alert-error" ng-show="IsTobaccoForm.Input.$error.required"><strong>*Required</strong></span>
    </ng-form>
</td>

我的 Controller 包含以下代码:

$scope.yesNoList = [{ value: true, text: 'Y' }, { value: false, text: 'N'}];

如果IsTobacco项目的值为真，值设置正确，一切都很好。但是，如果它为假，则出现所需的错误，即使 {{dep.IsTobacco}}呈现为假。真正奇怪的是，如果我将列表中的选定项更改为 true，它工作正常，但是如果我将其设置为 false，一个新的空白项将添加到列表中，并且该空白项被选中。

如果看起来问题不在上面发布的行中，我很乐意发布更多代码。

谢谢!

编辑:我还使用了 chrome 调试器，看到当数据在 Angular 中启动时，IsTobacco 的值等于 false .

编辑 2: 如果有人看到这篇文章是 AngularJS 的新手，我绝对会推荐阅读这两篇文章:part 1 & part 2 .它们是 AngularJS 表单的概述。

Answer 1

发生这种情况的原因是因为 false 的值在与 required 一起使用时被解释为缺少 ngModel。正如所讨论的here ，请考虑 Angular 源代码的摘录:

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

如果有一个必需的属性并且它的值为false，则它不会通过验证。这可能是有意为之，以便更轻松地验证所需的复选框，在这种情况下，未选中的默认值为 false。

可能不需要这样，考虑到复选框可以采用 ng-true-value 和 ng-false-value 属性，但我想要么这或强制对每个复选框上的这些属性使用非 true 和非 false 值，这是更好的选择。

一种解决方法是改用字符串“true”和“false”。