javascript - Angular JS - 替换 ng-options 中的空值

Question

我有一个要在下拉菜单中显示的对象列表，我正在使用 ng-options 来执行此操作:

<select ng-model="query.color" ng-options="c.name + ' ' + c.shade for c in colors" />

但是，我正在使用的对象的某些属性可能为空。在此示例中，颜色的阴影可以设置为空。

$scope.colors = [{
    name: 'black',
    shade: 'dark'
}, {
    name: 'yellow',
    shade: null
}];

与其让下拉列表的值为 yellow null，我希望它只是 yellow

有没有办法用空字符串替换空值？我试过使用 ngModel.$parsers，但只有在选择了特定选项后才会调用 $parsers。在生成选项标签之前是否有片刻我可以进行替换？

这是 jsfiddle这包括我对 $parsers

的实现

Answer 1

A filter会成功的。像这样:

myApp.filter('myFilter', function() {
    return function (c) {
        var text = c.name;
        if (null !== c.shade)
        {
            text += " " + c.shade;
        }
        return text;
    };
});

然后您的 ng-options 将如下所示:

ng-options="c | myFilter for c in colors"

请参阅此 fiddle :http://jsfiddle.net/EBnPe/