Angular中使用ng-repeat时将全名转换为名+姓氏首字母显示

嘿，刚好我之前处理过类似的需求，给你两个靠谱的AngularJS方案，看你更倾向哪种~

在AngularJS里，过滤器就是专门用来做视图层数据格式化的，这种场景用它最合适，写完之后整个项目里任何地方都能复用。

先在你的模块里定义这个过滤器：

angular.module('yourAppName')
  .filter('formatName', function() {
    return function(fullName) {
      // 先处理空值，避免报错
      if (!fullName) return '';
      
      const nameParts = fullName.split(' ');
      // 如果只有名字没有姓氏，直接返回原名
      if (nameParts.length === 1) return fullName;
      
      const firstName = nameParts[0];
      // 取最后一个部分作为姓氏，提取首字母并大写加句号
      const lastNameInitial = nameParts[nameParts.length - 1].charAt(0).toUpperCase() + '.';
      
      return `${firstName} ${lastNameInitial}`;
    };
  });

然后在你的ng-repeat模板里直接用这个过滤器就行：

<div ng-repeat="item in yourRestData">
  {{ item.fullName | formatName }}
</div>

如果你更习惯在拿到数据后就把格式处理好，不想在视图层加逻辑，也可以在请求REST接口之后直接转换数据：

angular.module('yourAppName')
  .controller('YourController', function($http) {
    const vm = this;
    
    // 请求REST接口数据
    $http.get('/your/rest/api/url')
      .then(function(response) {
        // 遍历数据，给每个条目添加格式化后的姓名字段
        vm.dataList = response.data.map(item => {
          if (item.fullName) {
            const nameParts = item.fullName.split(' ');
            if (nameParts.length > 1) {
              item.formattedName = `${nameParts[0]} ${nameParts[nameParts.length - 1].charAt(0).toUpperCase()}.`;
            } else {
              item.formattedName = item.fullName;
            }
          } else {
            item.formattedName = '';
          }
          return item;
        });
      });
  });

然后模板里直接用处理好的字段：

<div ng-repeat="item in vm.dataList">
  {{ item.formattedName }}
</div>

如果遇到姓名中间有多个空格的情况（比如「John Michael Doe」），上面的代码会自动取最后一个部分作为姓氏，提取首字母，这符合大多数场景的需求；要是你有特殊的姓名格式要处理，稍微调整split后的逻辑就行~另外一定要处理空值，避免出现奇怪的输出哦。

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