Ich habe ein Objekt mit 3 Feldern:
obj.firstName
obj.middleName
obj.lastName
Ich habe ein Array (objArray) dieser Objekte, das ich in einer ng-Wiederholung wie folgt zeige:
<tr ng-repeat="obj in objArray">
<td>{{ obj.lastName + ", " + obj.firstName + " " + obj.middleName }}</td>
</tr>
Das Problem ist, dass ich einige Objekte habe, die null als Wert für obj.middleName haben. Gibt es eine Möglichkeit, null nicht anzuzeigen, wenn ein Teil des Ausdrucks zufällig null ist? Ich sehe, dass Sie einen Filter verwenden können, um ein Element vollständig aus der ng-Wiederholung zu entfernen, aber ich möchte immer noch ein Element anzeigen, das Vorname und Nachname hat. Ich möchte es nur, damit es nicht so angezeigt wird:
Smith, John null
Sondern zeigt nur Folgendes:
Smith, John
3 Antworten
Sie können join
verwenden
<td>{{ [obj.lastName + ',' ,obj.firstName, obj.middleName].join(' ') }}</td>
JSFiddle-Demo: http://jsfiddle.net/HB7LU/21495/
Wickeln Sie einfach die betreffenden Teile mit einem span
mit einem ng-if
ein. Wenn es null ist, entfernt sich die Spanne aus dem DOM.
<tr ng-repeat="obj in objArray">
<td>{{ obj.lastName + ", " + obj.firstName }}<span ng-if="obj.middleName ">{{" " + obj.middleName }}</span></td>
</tr>
Ich würde vorschlagen, eine Funktion für den Bereich zu erstellen, die als Argument eines Ihrer Objekte verwendet, das dann behandelt, wenn eines der Felder null ist. Dies reduziert den Umfang der Vorlagenlogik und behält diese "Logik" in der Steuerung und nicht in der spezifischen Ansicht (Vorlage). Dann können Sie einen span
und einen ng-bind
Ausdruck verwenden, die auf den Rückgabewert Ihrer Funktion gesetzt werden.
/* 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;
}
Verwandte Fragen
Neue Fragen
angularjs
Verwenden Sie diese Option bei Fragen zu AngularJS (1.x), dem Open-Source-JavaScript-Framework. Verwenden Sie dieses Tag NICHT für Angular 2 oder neuere Versionen. Verwenden Sie stattdessen das Tag [angle].