添加两个额外的选项来选择列表，上面有ngOptions [英] Add two extra options to a select list with ngOptions on it

问题描述

我有一大堆的选择列表中，我尝试添加无和标题的选择给他们。在code看起来像这样：

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?

推荐答案

这是正确的，你只能有一个硬codeD元素。 ＆LT;选项NG重复＆GT; 技术上可以做到，但该方法只干净支持绑定到字符串，所以它会变得非常kludgey绑定到对象，你是这样做。

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.

你说你不能无添加到数据，但你可以做下一个最好的事情：它prePEND到阵列NG选项是跨迭代，使用过滤器：

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>

这篇关于添加两个额外的选项来选择列表，上面有ngOptions的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！