0

My select box currently is adding an empty option to the select options even though ng-init is selecting the correct option. The options are added after an ajax call.

<select
    ng-model="search.zoneType"
    ng-init="search.zoneType = 'RELOCATIONZONE'">

    <option value="">All Zone Types</option>
    <option
        ng-repeat="(id, poly) in data.polygons | unique: 'model.zoneType'"
        ng-selected="poly.model.zoneType == search.zoneType"
        value="{{poly.model.zoneType}}">
        {{::poly.model.zoneType}}
    </option>
</select>

But not only does the select box has an empty option right from the start, it also creates an empty select box if the currently selected option becomes removed - probably because the model value isn't available in the options anymore.

How can I catch these problems?

If the option of the current model value isn't available, it should just default to the first option (or any other).

ProblemsOfSumit
  • 19,543
  • 9
  • 50
  • 61
  • You could have `` **OR** other thing you could try switching to `ng-options` directive – Pankaj Parkar Nov 05 '15 at 18:21
  • If no option is chosen you need to have a blank option or a "Please Select" to indicate that. If you simply show the first option then the user has no way of knowing if they have chosen that option or if there is no option chosen. If your default selection is "All Zone Types", then the value for search.zoneType should be blank. I've had problems with using blank so often use a value like -99 or something. – Scott Nov 05 '15 at 19:05
  • @Scott "All Zone Types" is the default which has no value. Yet, there is another empty option created. Also: it doesn't help when search.zoneType has a value that doesn't exist in the options (e.g. if the option gets deleted) @PankajParkar ng-options didn't help me here sadly. I'll try something with ng-if but this won't help me either if the `search.zoneType` isn't available under options. – ProblemsOfSumit Nov 06 '15 at 08:21
  • I'm suggesting that rather than a blank value you use something like -99 as your "All Zone Types" value. That way the system will think there is a proper selected value and therefore will not add a blank value. – Scott Nov 06 '15 at 18:48
  • I am having the exact same problem.. i wonder if you found a solution yet? – Muhammad bin Yusrat Feb 26 '17 at 13:00
  • Possible duplicate of [Angular JS Remove Blank option from Select Option](https://stackoverflow.com/questions/20738953/angular-js-remove-blank-option-from-select-option) – Paul Sweatte May 25 '17 at 23:47

0 Answers0