Question

我有一个<select>元素，使用ng-optiona生成选择列表，并希望将所选内容设置为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>

我的控制器包含以下代码： $scope.yesNoList = [{ value: true, text: 'Y' }, { value: false, text: 'N'}];

如果项目的IsTobacco值为true，则表示值设置正确，一切正常。但是，如果为false，则会显示所需的错误，即使{{dep.IsTobacco}}呈现为false。真正奇怪的部分是，如果我将列表中的选定项更改为true，它可以正常工作，但是如果我将其设置为false，则会向列表中添加一个新的空白项，并选择该空白项。

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

谢谢！

编辑：我还使用了chrome调试器，看到当以角度启动数据时，IsTobacco的值等于false。

编辑2：如果观看此内容的人不熟悉AngularJS，我肯定会推荐阅读以下两篇文章：part 1＆amp; part 2。它们是AngularJS表格的概述。

Answer 1

发生这种情况的原因是，与false一起使用时，ngModel的值被解释为缺少required。正如所讨论的那样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'代替。

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

1 个答案: