In my table, I have 2 select options that change dynamically.
<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>
The values in config.hrs are also dynamic and contain hours in an array.
hrs = ["00:00","00:30","01:00",..,"23:00","23:30"]
I am trying to prevent the selection of the same hour for start and end times. Additionally, if a new row is added, previously selected hours should not be enabled.
I attempted to disable like this:
<select ng-model="s.end_time" class="form-control" ng-options="option disable when s.start_time for option in config.hrs"></select>Image 1 shows the current output. https://i.sstatic.net/rYNgI.png
Image 2 displays the expected output. https://i.sstatic.net/2ELep.png