angularjs - 如果值为空则显示 "-"？

Question

有什么办法可以用 Angular 来表达这样的东西:

<th ng-repeat=" o in Odds" >{{o.Name || "-"}}</th>

那么如果o.Name中没有数据就显示“-”呢？

Answer 1

您的示例应该可以工作，但如果 o.Name 中有空格或函数，它将无法解析为 falsey您将在 HTML 中看到一个不可见的空格，而不是所需的破折号。

通用过滤器可用于替换破折号的空值，并首先对输入应用各种标准化:

angular.module('App.filters', []).filter('placeholder', [function () {
    return function (text, placeholder) {
        // If we're dealing with a function, get the value
        if (angular.isFunction(text)) text = text();
        // Trim any whitespace and show placeholder if no content
        return text.trim() || placeholder;
    };
}]);

然后您可以按如下方式使用它:

<th ng-repeat=" o in Odds" >{{o.Name | placeholder:'-'}}</th>

这可以完全重用于其他行/列以及您想要应用相同规则的任何其他地方。

示例:http://jsfiddle.net/kfknbsp7/4/