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