选择默认选项不适用于 Ionic Framework

Posted 2023-03-31

【中文标题】选择默认选项不适用于 Ionic Framework

【英文标题】：Select default option not working with Ionic Framework

【发布时间】：2014-09-08 10:50:04

【问题描述】：

我正在使用 Ionic 框架。 我想输入第一个选项作为默认选项，但这样做不起作用。 我能做什么？

<select ng-model="newSpesaAereo.valuta">
    <option ng-selected="selected">Euro</option>
    <option>Dollaro</option>
    <option>Dollaro canadese</option>
    <option>Sterlina</option>
</select>

如果我使用 Google Chrome Developer Utility 分析页面，我会看这个。

如果我编辑此 html 并删除所选行，则 Euro 可见。

为什么会这样？

【参考方案1】：

设置ng-selected="true"。

例子：

<option ng-selected="true">Carta di credito</option>

【讨论】：

虽然这个解决方案在这种情况下确实有效，但在其他情况下它会失败。默认情况下，我根据所选值显示（和隐藏）其他表单元素。虽然 ng-selected="true" 默认显示选中的值，但它无法显示与该选中选项相关的其他表单元素。因此，如果您正在寻找与我类似的功能，我建议您尝试@lisimba.gilkes 提供的解决方案，因为它工作得非常好。

【参考方案2】：

默认选项不起作用的原因是，在您的控制器中，您可能已经像这样初始化了表单模型：

$scope.newSpesaAereo = 

如果你想设置默认的表单选项，你也应该在表单模型中设置它们。例如，将 'valuta' 设置为 'Euro'，如下所示：

 $scope.newSpesaAereo =  valuta: "Euro" 

我希望这会有所帮助！

P.S 在发布此类问题时，您还应该包含视图绑定到的控制器的代码。

【讨论】：

+1 我根据所选值显示其他表单元素。因此，如本解决方案所示在对象中设置默认值对我来说非常有效。

你是对的，我确实初始化了一个空对象！改变了它，它的工作，谢谢:)

【参考方案3】：

你需要使用ng-selected，而不是直接选中。

https://docs.angularjs.org/api/ng/directive/ngSelected

<select ng-model="newSpesaAereo.metodoPagamento">
  <option ng-selected="selected">Carta di credito</option>
  <option>Bancomat</option>
  <option>Contanti</option>
  <option>Altro</option>
</select>

【讨论】：

我为我的问题添加了更多细节。

您可以尝试创建一个代码笔或其他我们可以看到问题的东西吗？