Add two extra options to a select list with ngOptions on it
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:
-
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 thenullor "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 byexpression inngOptions) instead?<select ng-options="value.name group by title for value in values" ng-model="selection"> <option value="">None</option> </select>讨论(0) -
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>讨论(0)
加载中...
- 热议问题