如何在AngularJS ng-repeat渲染的指定列值前添加$符号

算力阿峰

2026-7-2

实现方法

方法1：针对指定字段直接判断渲染

如果你明确知道需要添加美元符号的字段名（比如字段名为price），可以在遍历field时判断当前字段是否为目标字段，是的话在值前拼接$：

修改原代码中两个<span>部分，示例如下：

<!-- $first 对应的span -->
<span ng-if="$first" aria-label="${Open record}: {{::item[field].display_value}}" role="link" tabindex="0">
  {{ field === 'price' ? '$' : '' }}{{::item[field].display_value | limitTo : item[field].limit}}{{::item[field].display_value.length > item[field].limit ? '...' : ''}}
</span>

<!-- !$first 对应的span -->
<span ng-if="!$first">
  {{ field === 'price' ? '$' : '' }}{{::item[field].display_value | limitTo : item[field].limit}}{{::item[field].display_value.length > item[field].limit ? '...' : ''}}
</span>

只需把'price'替换成你实际需要加美元符号的字段名即可。

方法2：自定义AngularJS过滤器（灵活复用）

如果需要给多个字段统一添加美元符号，推荐自定义过滤器：

在你的AngularJS模块中定义过滤器：

angular.module('yourAppModule')
.filter('addDollarSign', function() {
  return function(input) {
    // 空值或非数值类型直接返回原内容
    if (!input || isNaN(input)) {
      return input;
    }
    return '$' + input;
  };
});

在表格渲染代码中，给目标字段应用过滤器：

<!-- !$first 对应的span示例 -->
<span ng-if="!$first">
  {{::item[field].display_value | (field === 'price' ? 'addDollarSign' : '') | limitTo : item[field].limit}}{{::item[field].display_value.length > item[field].limit ? '...' : ''}}
</span>

同样替换'price'为目标字段名即可，其他需要加符号的字段只需修改判断条件。