如何在AngularJS表格的同一<td>中展示嵌套数组值

嘿，我来帮你搞定这个问题！在AngularJS里要在同一个<td>标签中展示数组的多个值，其实有几种简单又实用的实现方式，结合你的场景我给你详细拆解：

方法1：用ng-repeat遍历数组（灵活可控） #

如果需要给每个数组元素加样式、分隔符或者自定义展示逻辑，ng-repeat是最适合的选择。比如你的表格里「Categoría」列对应的数据是item.categorias数组，那可以这么写：

<td>
  <!-- 遍历数组元素，track by $index避免重复元素报错 -->
  <span ng-repeat="cat in item.categorias track by $index">
    {{cat}}
    <!-- 给除了最后一个元素之外的元素加逗号分隔 -->
    <span ng-if="!$last">, </span>
  </span>
</td>

这种方式的好处是可以自由控制每个元素的样式，比如给每个分类加个标签样式：

<td>
  <span class="badge bg-secondary" ng-repeat="cat in item.categorias track by $index">
    {{cat}}
  </span>
</td>

方法2：用自定义过滤器拼接成字符串（简洁高效） #

如果只是需要把数组元素用分隔符拼接成普通字符串，写个自定义过滤器会更简洁。首先在你的AngularJS模块里定义过滤器：

angular.module('你的应用模块名')
.filter('join', function() {
  return function(array, separator) {
    // 处理数组为空或undefined的情况，避免报错
    return (array || []).join(separator || ', ');
  };
});

然后在<td>里直接调用过滤器：

<td>{{item.categorias | join:', '}}</td>

一行代码就能把数组转成用逗号分隔的字符串，非常清爽。

结合你的表格完整示例 #

把上面的方法套进你提供的表格代码里，完整的表格结构大概是这样（假设你从后端拿到的列表是publicaciones）：

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th>Acciones</th>
      <th>Referencia</th>
      <th>Tipo de Publicación</th>
      <th>Categoría</th>
      <th>Fecha de adición</th>
    </tr>
  </thead>
  <tbody>
    <!-- 遍历后端返回的列表数据 -->
    <tr ng-repeat="pub in publicaciones track by pub.id">
      <td><!-- 这里放操作按钮，比如编辑、删除 --></td>
      <td>{{pub.referencia}}</td>
      <td>{{pub.tipoPublicacion}}</td>
      <!-- 这里就是展示数组的列，用方法1的实现 -->
      <td>
        <span ng-repeat="cat in pub.categorias track by $index">
          {{cat}}<span ng-if="!$last">, </span>
        </span>
      </td>
      <td>{{pub.fechaAdicion | date:'dd/MM/yyyy'}}</td>
    </tr>
  </tbody>
</table>

小提示 #

记得确保后端Spring MVC返回的categorias字段是一个有效的数组（而不是null或者字符串），如果有可能为空的情况，在代码里加上(pub.categorias || [])的判断，避免AngularJS报错。

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