在AngularJS中使用ng-repeat时如何获取文件名的扩展名？

嘿，这个需求在AngularJS里有几种很实用的实现方式，我给你梳理下最常用的两种：

方法一：自定义过滤器（推荐，可复用） #

AngularJS的过滤器天生适合处理这类视图层的数据格式化需求，你可以定义一个全局过滤器，在任何需要的地方调用：

首先在你的AngularJS模块里定义过滤器：

angular.module('yourAppName')
  .filter('fileExtension', function() {
    return function(filename) {
      if (!filename) return '';
      // 拆分文件名，取最后一个部分作为扩展名
      const parts = filename.split('.');
      // 处理没有扩展名的情况（比如文件名里没有点）
      return parts.length > 1 ? parts.pop() : '';
    };
  });

然后在HTML的ng-repeat中直接使用这个过滤器：

<div ng-repeat="file in yourFileArray">
  文件名: {{ file }} <br>
  扩展名: {{ file | fileExtension }}
</div>

这种方式的好处是逻辑集中、可复用，如果后续需要修改扩展名的处理规则（比如忽略某些特殊情况），只需要修改过滤器代码即可，不用在每个视图里重复调整。

方法二：直接在视图中使用表达式（快速实现） #

如果只是临时用一次，不想写过滤器，也可以直接在ng-repeat里用字符串处理表达式：

<div ng-repeat="file in yourFileArray">
  文件名: {{ file }} <br>
  扩展名: {{ file.split('.').pop() }}
</div>

不过要注意这种方式的局限性：

• 如果文件名没有扩展名（比如readme），会返回整个文件名，这可能不是你想要的结果
• 如果文件名包含多个点（比如document.v1.pdf），虽然能正确取到最后一个扩展名，但如果需要更复杂的逻辑（比如忽略版本号部分），这种方式就不好扩展了

处理特殊场景 #

如果需要处理一些特殊情况，比如文件名以点开头（比如.gitignore），或者文件名里有多个点但你想取第一个点之后的全部内容，可以修改过滤器的逻辑：

angular.module('yourAppName')
  .filter('fileExtension', function() {
    return function(filename) {
      if (!filename) return '';
      // 跳过开头的点，找到第一个有效点的位置
      const firstDotIndex = filename.indexOf('.');
      if (firstDotIndex === -1 || firstDotIndex === 0) return '';
      return filename.slice(firstDotIndex + 1);
    };
  });

这样处理的话，.gitignore会返回空，document.v1.pdf会返回v1.pdf，你可以根据实际需求调整逻辑。

我平时做AngularJS项目的时候，大部分情况都会选择自定义过滤器，毕竟复用性和可维护性更强，偶尔简单场景才会用表达式直接处理。

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