如果已在相邻选择中选择了ng-option中的Angularjs-禁用选项

Question

我有一个表格，其中有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>

<{1}}中的

值也是动态的，它将小时保存在数组中。

config.hrs

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

我试图像这样禁用     hrs = ["00:00","00:30","01:00",..,"23:00","23:30"] 但是它会在end_time中禁用整个选项。

图片1是我当前的输出。

图像2是我的预期输出。

Answer 1

我不认为可以使用您当前的设置执行此操作。

备选方案＃1

保持一组对象，例如[{ time: '08:00', selected: false }, ...]。然后，您只能显示selected === false的选项，但不能显示ng-options，但ng-repeat上只有<option>...</option>。{/ p>

备选方案＃2

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

Answer 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>

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