Angularjs-如果已在相邻选择中选择，则禁用 ng-option 中的选项答案

【问题标题】：Angularjs- Disable option in ng-option if already selected in adjacent selectAngularjs-如果已在相邻选择中选择，则禁用 ng-option 中的选项
【发布时间】：2017-02-22 07:33:59
【问题描述】：

我有一个表格，其中有 2 个动态选择选项

<tr>
     <th>Start time</th>
     <th>End time</th>
</tr>
<tr ng-repeat="s in config.time">
     <td>
       <select ng-model="s.start_time" class="form-control" ng-options="option for option in config.hrs"></select>
     </td>
     <td>
       <select ng-model="s.end_time" class="form-control" ng-options="option for option in config.hrs"></select>
     </td>
</tr>

config.hrs 中的值也是动态的，它将小时数保存在一个数组中。

hrs = ["00:00","00:30","01:00",..,"23:00","23:30"]

我想禁止在 start_time 中选择的小时被选为 end_time，如果我添加另一行，我不想启用之前选择的小时。

我试图像这样禁用 <select ng-model="s.end_time" class="form-control" ng-options="option disable when s.start_time for option in config.hrs"></select> 但它会禁用 end_time 中的所有选项。

图片 1 是我当前的输出。

图 2 是我的预期输出。

【问题讨论】：

如果你可以创建一个很棒的代码 sn-p 或 fiddle，否则你可以使用 ng-change 来调用一些函数并设置你的逻辑

标签： javascript angularjs time

【解决方案1】：

我认为您当前的设置无法做到这一点。

备选方案#1

保存一个对象数组，例如[{ time: '08:00', selected: false }, ...]。然后你可以只显示selected === false的选项，虽然不是ng-options，而是<option>...</option>上的一个简单的ng-repeat。

备选方案#2

在选择时从数组中删除选定的时间并将其存储在另一个变量中。

【讨论】：

【解决方案2】：

您可以尝试使用这种类型的代码-

    <td>
       <select ng-model="s.end_time" class="form-control">
        <option ng-repeat="option in config.hrs" ng-disabled="s.start_time > option" >{{option}}</option>
       </select>
     </td>

希望它能给您一个想法并帮助您解决问题。

【讨论】：