在选择列表中添加两个额外选项,其中包含ngOptions

ajm*_*jma 7 javascript angularjs

我有一堆选择列表,我正在尝试为它们添加"无"和标题选项.代码如下:

<select ng-options="value.name for value in values" ng-model="selection">
    <option value="" disabled>{{title}}</option>
    <option value="">None</option>
</select>
Run Code Online (Sandbox Code Playgroud)

目前,我无法将它们添加到数据中,所以我试图找到一种方法来实现这一点.当我第一次加载它们时,"none"选项不存在.标题在那里并按预期工作,但似乎我无法在此选择列表中添加两个空白条目.

最简单的方法是将"无"选项添加到数据中,但对我来说不可能.有没有正确的方法来实现我想要的?

Kev*_*ley 9

这是正确的,你只能有一个硬编码元素.<option ng-repeat>从技术上讲可以完成,但是这种方法只是干净地支持绑定到字符串,所以当你正在做的时候,绑定到对象会变得非常困难.

你说你不能为数据添加"无",但是你可以做下一个最好的事情:将它添加到数组ng-options迭代,使用过滤器:

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;
    };
})
Run Code Online (Sandbox Code Playgroud)

然后像这样使用过滤器:

 <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>
Run Code Online (Sandbox Code Playgroud)