Angularjs- Disable option in ng-option if already selected in adjacent select

Question

I have a table where there are 2 select options which are dynamic

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

value in config.hrs is also dynamic which holds the hours in an array.

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

I want to disable the hour which is selected in start_time from being selected as end_time and if i add another row i dont want the previously selected hrs to be enabled.

I tried 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> but it disables the entire options in end_time.

Image 1 is my current output.

Image 2 is my expected output.

Answer 1

I do not think it is possible to do this with your current setup.

Alternative #1

Hold an array of objects, eg [{ time: '08:00', selected: false }, ...] . Then you can display only options where selected === false , although not with ng-options , but with a simple ng-repeat on <option>...</option> .

Alternative #2

On select remove the selected time from an array and store it in another variable.

Answer 2

You can try using this type of code-

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

Hope it will give you an idea and help you to resolve the issue.