1

According to the Angular documentation, you can create a null option that is not part of your model. This allows you to have a descriptive option. I.E. in their example they have -- choose color --. How can I make the null option the default option? I want the user to see this descriptive null option when they first load the page.

Bonus points if you can also tell me how to make the null option be disabled via angular.

David says Reinstate Monica
  • 19,209
  • 22
  • 79
  • 122

2 Answers2

6

The value is set to null automatically. But if you receive data from REST for exaple and it will be set to some value - you can add ng-init to your select tag. And for disable null option after selection of some value - you need to add ng-disabled to your option tag.

<select ng-model="model" ng-options="item for item in items" ng-init="model = null">
  <option value="" ng-disabled="!!model">--Select option--</option>
</select>

And in controller:

.controller('MainCtrl', function($scope) {
  $scope.model = 'First';
  $scope.items = ['First', 'Second', 'Third'];
});

Demo: http://plnkr.co/edit/esoX26I9bESE59yneOvv

ababashka
  • 2,101
  • 1
  • 14
  • 15
  • as discussed in http://stackoverflow.com/questions/18722783/angular-html-select-option-disable-and-enable the ng-disabled attribute isn't always a solid option...didn't work in my more complex implementations...ideal, but buggy – beauXjames Oct 02 '14 at 21:48
  • I think that you can remove if `ng-init` if you also remove `$scope.model = 'First'`. That way `model` is defaulted to null. – David says Reinstate Monica Oct 02 '14 at 21:51
  • @DavidGrinberg: If you use `select` with promises, and the model is a part of data which you receive from service - after response will come the value will not be set to `null` if data is _not_ `null`. So in this case `ng-init` wll be helpfull to set model value to `null` if it is not null before initializing `select`. Here is a demo for this case: http://plnkr.co/edit/MtDwvq7RyitpnxBRn6Br – ababashka Oct 02 '14 at 21:58
  • @beauXjames: by links from one of answers i saw that problem is when you want to disable some option from options which is not `null`. For problem described in this question it's enough to use `ng-disabled` and i propose native `angular` decision without extending code by directive which is not required in this question. – ababashka Oct 02 '14 at 22:13
2

Just use the ng-if to completely remove it once they have a selection. Best option from my experience.

<select name="objectSelector"
    ng-model="selectedObject"
    ng-options="obj for obj in Objects" required>
    <option value="" ng-if="!selectedObject">--- Select Object ---</option>
</select>

If you really, really must show the '--- Select Object ---' after a choice has already been made, then you may just want to insert a second 

<option value="" ng-if="!!selectedObject" disabled>--- Select Object ---</option>

Then the visible option will display accordingly...haven't found a simple way to set 'disabled' dynamically.

beauXjames
  • 8,222
  • 3
  • 49
  • 66
  • I havent had a chance to try it yet, but wouldn't this not set the default to `--selected object--`? Also, I dont want to remove it after they choose; I just want it to be disabled. – David says Reinstate Monica Oct 02 '14 at 21:34
  • well, if selectedObject were null, then this would be the option that would display...then all the other objects would show after – beauXjames Oct 02 '14 at 21:43
  • Edited answer with another option for disabling – beauXjames Oct 02 '14 at 21:46
  • Ahh, I see. I had already initialized my `ng-model`, I didnt realize you could leave it as null. So what I want is actually to just have a regular default option, *and* to not initialize my model. Now I just need to figure out how to make the default option disabled... – David says Reinstate Monica Oct 02 '14 at 21:47
  • 1
    @beauXjames: `ng-options="obj in Objects"` this code will not work. Expected expression for `ng-options` is `item for item in items` – ababashka Oct 02 '14 at 22:02
  • @ababashka yeah yeah...rushing...updating – beauXjames Oct 02 '14 at 22:05