基于条件的选择中的AngularJS选项答案

【问题标题】：AngularJS Options in a Select based on a condition基于条件的选择中的AngularJS选项
【发布时间】：2016-04-01 14:04:27
【问题描述】：

我有一个<select> 元素，它可能会根据一个条件设置默认的<option> - 该条件是如果另一个用户之前提交了表单并创建了要提交的对象。但是，我似乎无法将 ng-if 应用于 Option 元素（或任何标签），而且我发现很难提出解决方案。

目前，我的代码如下：

<select
    id="someId"
    ng-options="(item?'Yes':'No') for item in [true, false]"
    class="someClass"
    ng-class="someMethodToGetDynamicClass('this')
    ng-model="myObject.thisOption"
    ng-disabled="valueCheckingIfThisObjectHasBeenPreviouslySubmitted">
    <option ng-if="valueCheckingIfThisObjectHasBeenPreviouslySubmitted" selected>{{myObject.thisOption}}</option>
</select>

仅当valueCheckingIfThisObjectHasBeenPreviouslySubmitted 为真时才应设置所选选项 - 这意味着其他人之前已提交过表单，因此该值已设置且仅应显示。

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

您可以使用过滤器，或者更简单的选择，避免 <select> 上的 ng-options 属性，而在 <option> 元素上使用 ng-repeat

我简化了您的代码以提供一个快速示例（甚至因为我看不到循环部分...您简化了它并且丢失了一些东西？或者可能只是星期五下午，我看不到它：）

<select ng-options="item for item in items" ng-model="selectedItem">
</select>

这会变成

<select ng-model="selectedItem">
    <option ng-repeat="item for item in items" ng-if="item === yourConditionVariableOrElse">{{item}}<option>
</select>

我希望即使简化了程序也很清楚。

【讨论】：

根据我的阅读，ng-if 不能用于<option> 标签 - 我弄错了吗？
确实可以使用它；）我纠正了错误，ng-repeat 代替了ng-for
这篇文章的最佳答案是否可能已经过时了？ stackoverflow.com/questions/23755801/…
不，不是，它说你不能在<option>元素内插入html元素（或标签，它是一样的），但我在这里只使用属性：他正在使用属性太
哦，我现在明白了！我的错哈哈

【解决方案2】：

尝试使用ng-selected。
例如：

 <option ng-selected="valueCheckingIfThisObjectHasBeenPreviouslySubmitted">{{myObject.thisOption}}</option>

【讨论】：

【解决方案3】：

好的，基于 MarcoS 的回答和 Naigels 建议使用 ng-repeat，我想我已经解决了：

<select
id="someId"
class="someClass"
ng-class="someMethodToGetDynamicClass('this')
ng-model="myObject.thisOption"
ng-disabled="valueCheckingIfThisObjectHasBeenPreviouslySubmitted">
<option ng-repeat="item in [{'k':true, 'v':'Yes'}, {'k':false, 'v':'No'}] ng-selected="valueCheckingIfThisObjectHasBeenPreviouslySubmitted && item.k == myObject.thisOption" >{{item.v}}</option>

ng-repeat 现在在存储我要检查的值 ('k') 和显示标签 ('v') 的对象数组中重复出现。 ng-selected 然后检查valueCheckingIfThisObjectHasBeenPreviouslySubmitted 是否为真以及当前item.k 是否等于提交的值。

【讨论】：