AngularJS从数据库获取联系人姓名时提取字符串首字母的问题

你踩了个常见的小坑——当数据从数据库返回时，$scope.names.list应该是包含多个姓名的数组，而非单个字符串，直接调用slice(0,1)只会拿到数组的第一个元素，而非每个姓名的首字母。下面给你两种实用的解决办法：

方法一：在控制器中遍历处理每个姓名 #

直接在$http的回调里遍历返回的数据集，给每个姓名对象添加首字母属性，视图里就能直接调用：

app.controller("myCtrl",function($scope,$http) {
  $http.post( "names.php", {'id':$scope.id} ).then(function(response) {
    $scope.names = response.data;
    // 遍历每个条目，提取首字母（顺便转大写优化显示）
    $scope.names.forEach(function(item) {
      // 空值判断避免报错
      item.fLetter = item.list ? item.list.slice(0,1).toUpperCase() : '';
    });
  })
});

对应的视图代码：

<div ng-app="myapp" ng-controller="myCtrl">
  <!-- 用ng-repeat遍历所有姓名 -->
  <div ng-repeat="name in names">
    首字母：{{name.fLetter}}，全名：{{name.list}}
  </div>
</div>

方法二：自定义过滤器（更灵活复用） #

如果多处需要提取首字母，自定义一个AngularJS过滤器会更方便，一次定义可在多处使用：

第一步：定义过滤器 #

app.filter('firstLetter', function() {
  return function(input) {
    // 处理输入为空的情况，返回空字符串避免报错
    return input ? input.slice(0,1).toUpperCase() : '';
  };
});

第二步：控制器只需获取数据 #

app.controller("myCtrl",function($scope,$http) {
  $http.post( "names.php", {'id':$scope.id} ).then(function(response) {
    $scope.names = response.data;
  })
});

第三步：视图中直接使用过滤器 #

<div ng-app="myapp" ng-controller="myCtrl">
  <div ng-repeat="name in names">
    首字母：{{name.list | firstLetter}}，全名：{{name.list}}
  </div>
</div>

小提示 #

要确保response.data是一个数组，每个元素都包含list字段（对应你数据库里的姓名字段）。如果后端返回的结构是response.data.list才是姓名数组，记得把$scope.names = response.data改成$scope.names = response.data.list哦。

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