Могу ли я скрыть нулевую часть выражения AngularJS?

Question

У меня есть объект, который имеет 3 поля:

obj.firstName 
obj.middleName 
obj.lastName 

У меня есть массив (objArray) этих объектов, которые я показаны в нг-повторить так:

<tr ng-repeat="obj in objArray"> 
    <td>{{ obj.lastName + ", " + obj.firstName + " " + obj.middleName }}</td> 
</tr> 

Проблема что у меня есть некоторые obj, которые имеют null как значение для obj.middleName. Есть ли способ не отображать значение null, если часть выражения имеет значение null? Я вижу, что вы можете использовать фильтр для полного удаления одного элемента из ng-repeat, но я все же хочу отобразить элемент с именем firstName и lastName. Я просто хочу его так, чтобы он не показывает, как это:

Смит, Джон нулевой

Но скорее всего это показывает:

Смит, Джон

Answer 1

Вы можете использовать join

<td>{{ [obj.lastName + ',' ,obj.firstName, obj.middleName].join(' ') }}</td> 

JSFiddle Demo: http://jsfiddle.net/moogs/HB7LU/21495/

Answer 2

Я хотел бы предложить создать функцию scope, который принимает в качестве аргумента один из ваших объектов, который затем обрабатывает, если какое-либо из полей имеет значение null. Это уменьшает количество логики шаблона и сохраняет эту «логику» в контроллере, а не конкретный вид (шаблон). Затем вы можете использовать span и выражение ng-bind, которое будет установлено на возвращаемое значение вашей функции.

/* HTML */ 
<tr ng-repeat="obj in objArray"> 
    <td><span ng-bind="getDisplayName(obj)"></span></td> 
</tr> 


/* JS */ 
$scope.getDisplayName = function getDisplayName(obj) { 
    var name = ""; 
    if (!obj) { 
     return name; 
    } 

    if (obj.lastName) { 
     name += obj.lastname + ", "; 
    } 

    if (obj.firstName) { 
     name += obj.firstName + " "; 
    } 

    if (obj.middleName) { 
     name += obj.middleName 
    } 

    return name; 
} 

Answer 3

Просто обернуть детали в концерне с span с ng-if. Если он равен нулю, диапазон удалит себя из DOM.

<tr ng-repeat="obj in objArray"> 
    <td>{{ obj.lastName + ", " + obj.firstName }}<span ng-if="obj.middleName ">{{" " + obj.middleName }}</span></td> 
</tr>