Question

我有一个包含3个字段的对象：

obj.firstName
obj.middleName
obj.lastName

我有一个这些对象的数组（objArray），我在这样的ng-repeat中显示：

<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演示：http://jsfiddle.net/HB7LU/21495/

Answer 2

使用span将ng-if包裹起来。如果它为null，则span将从DOM中删除。

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

Answer 3

我建议在范围上创建一个函数，该函数将您的对象作为参数，然后在任何字段为空时处理。这减少了模板逻辑的数量并保持了逻辑＆＃34;在控制器而不是特定的视图（模板）。然后，您可以使用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;
}

我可以隐藏AngularJS表达式的空部分吗？

3 个答案: