角JS - 在NG選項更換空值

Question

我有，我想在下拉菜單中顯示的對象列表，我使用NG選項做到這一點：

<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，但只有在選擇特定選項後纔會調用$ parser。是否有一段時間纔會生成選項標籤，以便我可以進行更換？

這裏是一個包含了我執行$解析器

Answer 1

一個filter會做的伎倆的jsfiddle。事情是這樣的：

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

這裏有一個不同的方法可以嘗試：

的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。