AngularJS中ng-repeat不显示表格空字段的解决办法咨询

嘿，这个问题我之前做AngularJS项目时也踩过坑！AngularJS原生的currency过滤器在处理null、undefined或者空值时，默认会返回空字符串，导致表格里的空字段看起来像是被“过滤”掉了，其实只是没渲染出内容而已。这里有几个实用的解决办法，你可以根据需求选：

1. 用默认值运算符快速兜底 #

最简单的方式就是在绑定数据时，给空值设置一个默认的0，让currency过滤器能正常格式化。把你的代码改成这样：

<tr> 
  <td>{{ (Ratios['A'] || 0) | currency }}</td> 
  <td>{{ (Ratios['B'] || 0) | currency }}</td> 
  <td>{{ (Ratios['C'] || 0) | currency }}</td> 
  <td>{{ (Ratios['D'] || 0) | currency }}</td> 
  <td>{{ (Ratios['E'] || 0) | currency }}</td> 
  <td>{{ (Ratios['F'] || 0) | currency }}</td>
</tr>

这样如果Ratios里的某个属性是空、null或者未定义，就会用0代替，显示成对应的货币格式（比如$0.00），单元格就不会空着了。

2. 用三元运算符自定义占位符 #

如果你不想显示0，而是想要更友好的占位（比如N/A或者--），可以用三元表达式做判断：

<tr> 
  <td>{{ Ratios['A'] ? (Ratios['A'] | currency) : '--' }}</td> 
  <td>{{ Ratios['B'] ? (Ratios['B'] | currency) : '--' }}</td> 
  <!-- 其他单元格同理 -->
</tr>

这种方式能灵活控制空值时的显示内容，保证表格结构完整。

3. 自定义过滤器实现全局复用 #

如果你的项目里很多地方都需要处理这种场景，不如封装一个增强版的currency过滤器，统一处理空值逻辑：
首先在你的AngularJS模块里定义过滤器：

// 假设你的模块叫myApp
angular.module('myApp', [])
.filter('currencyWithDefault', ['$filter', function($filter) {
  return function(input, symbol, fractionSize, defaultValue) {
    // 默认空值显示$0.00，也可以自定义
    defaultValue = defaultValue || '$0.00';
    if (input == null || input === '') {
      return defaultValue;
    }
    // 调用原生currency过滤器处理有效值
    return $filter('currency')(input, symbol, fractionSize);
  };
}]);

然后在模板里使用这个自定义过滤器：

<tr> 
  <td>{{ Ratios['A'] | currencyWithDefault }}</td> 
  <!-- 也可以自定义符号、小数位数和空值占位符 -->
  <td>{{ Ratios['B'] | currencyWithDefault : '¥' : 2 : '暂无数据' }}</td> 
</tr>

这种方式一劳永逸，不用在每个单元格重复写判断逻辑。

另外补充一点：如果你的Ratios对象里某些属性根本不存在（不是空值，是属性未定义），也会出现同样的问题，上面的三种方法也都能覆盖这种情况哦。

内容的提问来源于stack exchange，提问作者joshuaeisberg