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
}];

而不是让下拉的价值 be yellow null，我希望它只是yellow

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

这是包含我的 $parsers 实现的jsfiddle

Answer 1

过滤器可以解决问题。像这样的东西：

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"

看到这个小提琴：http: //jsfiddle.net/EBnPe/

Answer 2

Here's a different approach you can try:

Javascript

function MyCtrl($scope) {
    function Color(name, shade) {
        this.name = name;
        this.shade = shade;
        this.displayName = name + ' ' + (shade || '');
    }
    $scope.colors = [
        new Color('black','dark'),
        new Color('yellow', null)
    ];    
    $scope.query = { color: $scope.colors[1] };
}

HTML

<div ng-controller="MyCtrl">
  <select ng-model="query.color" ng-options="c.displayName for c in colors">
  </select>
  <pre>
       Live: query={{query.color}}
  </pre>
</div>

jsFiddle here.