AngularJS不会在布尔模型字段的下拉列表中设置任何值(AngularJS does not set any value in a drop-down list for a boolean model field)

尽管我的模型包含一个布尔值，但下面的代码显示为true ：

{{ moduleDAO.includeIntermediate }}

以下HTML代码：

<div class="form-group" ng-class="{'has-error': ModuleDAOForm.includeIntermediate.$invalid}"> <label for="includeIntermediate" class="col-sm-2 control-label">Include Intermediate</label> <div id="includeIntermediateControls" class="col-sm-10"> <select id="includeIntermediate" name="includeIntermediate" class="form-control" ng-model="moduleDAO.includeIntermediate" > <option value="">Choose a value</option> <option value="false">false</option> <option value="true">true</option> </select> </div> </div>

呈现一个没有设置任何值的下拉列表，为什么？

BTW。 上面的代码是由JBoss Forge AngularJS脚手架插件生成的。

Despite my model contains a boolean value, below code displays true:

{{ moduleDAO.includeIntermediate }}

the following HTML code:

<div class="form-group" ng-class="{'has-error': ModuleDAOForm.includeIntermediate.$invalid}"> <label for="includeIntermediate" class="col-sm-2 control-label">Include Intermediate</label> <div id="includeIntermediateControls" class="col-sm-10"> <select id="includeIntermediate" name="includeIntermediate" class="form-control" ng-model="moduleDAO.includeIntermediate" > <option value="">Choose a value</option> <option value="false">false</option> <option value="true">true</option> </select> </div> </div>

renders a drop-down list without any value set, why?

BTW. The above code has been generated by the JBoss Forge AngularJS scaffold plugin.

最满意答案

看起来像AngularJS有一个问题，如果该值是一个布尔值，选择一个选项。 但是，如果你使用ng-options来定义你的选项标签，它可以工作：

调节器

$scope.options = [ {value: '', label: 'Choose a value'}, {value: false, label: 'false'}, {value: true, label: 'true'}, ];

HTML

<select ng-options="o.value as o.label for o in options"></select>

但是，如果您无法访问代码并自动为您生成，则此修复可能难以实现！ 如果你能做到这一点，请告诉我。

Seems like AngularJS has a problem selecting an option before hand if the value is a boolean. It does work however if you use ng-options to define your option tags:

controller

$scope.options = [ {value: '', label: 'Choose a value'}, {value: false, label: 'false'}, {value: true, label: 'true'}, ];

html

<select ng-options="o.value as o.label for o in options"></select>

But if you do not have access to the code and it's generated automatically for you, this fix might be harder to implement!? Let me know if you can achieve this.

更多推荐