Add two extra options to a select list with ngOptions on it

Question

I have a bunch of select lists and I'm trying to add a "none" and a title option to them. The code looks like so:

<select ng-options="value.name for value in values" ng-model="selection">
    <option value="" disabled>{{title}}</option>
    <option value="">None</option>
</select>

For right now, I cannot add them to the data so I am trying to find a way to get this working. When I load them for the first time, the "none" option is not there. The title is there and works as intended, but it seems I cannot add two blank entries to this select list.

The easiest way would be to have the "none" option added to the data but it's not a possibility for me. Is there a proper way to achieve what I want?

Answer 1

That's correct, you can only have one hard-coded element. <option ng-repeat> can technically be done, but that method only cleanly supports binding to strings, so it would get very kludgey to bind to objects, as you're doing.

You say you can't add "None" to the data, but you can do the next best thing: prepend it to the array ng-options is iterating across, using a filter:

app.filter('addNone', function () {
    return function(input) {
        var newArray = input.slice(0); //clone the array, or you'll end up with a new "None" option added to your "values" array on every digest cycle.
        newArray.unshift({ name: "None" });
        return newArray;
    };
})

Then use the filter like this:

 <select class="form-control" ng-options="value.name as value.name for value in filter.values | addNone" ng-model="filter.selected" ng-change="goSearch()">
                    <option value="" disabled>{{filter.name}}</option>
                </select>

Answer 2

It's impossible with ngOptions, as explicitly mentioned in the documentation (emphasis mine):

Optionally, a single hard-coded <option> element, with the value set to an empty string, can be nested into the <select> element. This element will then represent the null or "not selected" option.

If you want, you can manually construct the options list with the ngRepeat directive:

<select ng-model="selection">
    <option value="" disabled>{{title}}</option>
    <option ng-repeat="value in values">{{value.name}}</option>
    <option value="">None</option>
</select>

But I would strongly advice against that, as it's absolutely not semantic: your title isn't an option. Do you have contemplate to use a heading element, a <label> or an <optgroup> (with the group by expression in ngOptions) instead?

<select ng-options="value.name group by title for value in values" ng-model="selection">
    <option value="">None</option>
</select>