Currently, I am working with AngularJS (version < 1.4). When using ng-repeat in select-option, I encounter an extra blank option which is typical in AngularJS. However, selecting this blank option automatically picks the next available option. In my scenario, I have multiple select-options with disable functionality to prevent selecting a previously chosen option so that it cannot be selected in the next duplicate select option. You can see the code snippet below:
<div class='col-sm-6' ng-repeat="orderTask in orderList">
<div class="form-group d-flex" id="task_div">
<label for="NamesList" class="control-label">
<span class="ng-binding px-2">Task {{$index + 1}}:</span>
</label>
<select class="form-control" name="tasksList"
id="tasksList" ng-model="orderTask.name"
ng-change="onTaskValueChange(orderTask.name, $index)"
style="width:80%">
<option value="" disabled selected>Select an option</option>
<option ng-repeat="task in allTasks" ng-value="task.name" ng-disabled="taskIsDisabled(task.name)"
ng-selected="task.name === orderTask.name">
{{ task.name }}
</option>
</select>
</div>
</div>
I want to either hide the blank option or prevent the selection of the next available option when clicking on the blank option (no action should be taken upon clicking the blank option). What would be the best way to accomplish this?