如何在AngularJS中关联MySQL的用户表与帖子表

针对你给出的通过user_id关联帖子和用户数据、展示对应username的需求，以下是几种常用的实现方式：

方法一：控制器内预处理关联数据 #

适合数据量不大、无需频繁动态更新的场景，直接将用户信息合并到帖子对象中，页面渲染时可直接调用。

代码示例 #

// 定义帖子与用户数据
$scope.posts = [
  {post_id: 1, user_id: 2, date: '18-05-1997'}
];
$scope.users = [
  {user_id: 2, fullname: 'herman', username: 'herman_man'}
];

// 遍历帖子，匹配关联用户
$scope.posts.forEach(post => {
  const targetUser = $scope.users.find(user => user.user_id === post.user_id);
  if (targetUser) {
    post.relatedUser = targetUser; // 将用户对象挂载到帖子属性上
  }
});

页面渲染 #

<div ng-repeat="post in posts">
  帖子ID: {{post.post_id}} | 发布者: {{post.relatedUser.username}} | 发布日期: {{post.date}}
</div>

方法二：自定义过滤器动态匹配 #

适合数据可能动态更新的场景，无需手动重新处理关联，模板中直接调用过滤器匹配用户。

定义过滤器 #

// 在AngularJS模块中注册过滤器
app.filter('matchUserById', function() {
  return function(userList, userId) {
    return userList.find(user => user.user_id === userId);
  };
});

页面渲染 #

<div ng-repeat="post in posts">
  帖子ID: {{post.post_id}} 
  | 发布者: {{(users | matchUserById: post.user_id).username || '未知用户'}} 
  | 发布日期: {{post.date}}
</div>

注：添加|| '未知用户'是为了处理找不到匹配用户的异常情况，避免页面报错。

方法三：模板内嵌套遍历（不推荐） #

仅适合极小数据量场景，性能较差（每次渲染帖子都要遍历用户数组）。

页面渲染 #

<div ng-repeat="post in posts">
  帖子ID: {{post.post_id}} | 发布日期: {{post.date}}
  <span ng-repeat="user in users" ng-if="user.user_id === post.user_id">
    | 发布者: {{user.username}}
  </span>
</div>

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