Angular中如何将整数转换为对应字符串并在表格展示

当然可以啦！你有两种常用的实现思路，既能让页面展示对应的名称，又能保留原整数的实际值，我给你详细拆解下：

这种方式适合只在当前页面需要转换的场景，直接在控制器里给原始数据添加对应的名称字段，页面展示用名称，业务逻辑依然用原数值。

首先在你的Angular控制器里定义映射关系，然后给每个数据项补充名称：

app.controller('YourController', function($scope) {
  // 假设这是你从接口拿到的原始数据
  $scope.names = [
    { bar: 1 },
    { bar: 2 },
    { bar: 3 }
  ];

  // 定义「数值→名称」的映射表
  const barToName = {
    1: "bar",
    2: "foo",
    3: "baz"
    // 可以根据需求继续添加更多映射规则
  };

  // 遍历数据，给每个项添加对应的名称字段
  $scope.names.forEach(item => {
    // 如果没有匹配到数值，就显示「未知」兜底
    item.barDisplayName = barToName[item.bar] || "未知";
  });
});

然后在HTML页面里展示名称，原数值x.bar依然可以正常用于业务逻辑（比如点击事件、条件判断）：

<thead>
  <tr>
    <th>Foo</th>
    <th>操作</th>
  </tr>
</thead>
<tbody>
  <tr ng-repeat= "x in names">
    <td>{{ x.barDisplayName }}</td>
    <!-- 这里依然用原数值1来做判断或操作 -->
    <td><button ng-click="handleOperation(x.bar)">点击操作</button></td>
  </tr>
</tbody>

如果你的项目里多个页面或组件都需要做这种数值转名称的操作，用过滤器会更方便，复用性强。我帮你修正了你给出的过滤器代码里的小问题（比如拼写错误、逻辑漏洞），给出正确的实现：

首先定义过滤器：

app.filter('barNameFilter', function() {
  return function(barValue) {
    // 处理无效数值（比如null、0、负数）
    if (!barValue || barValue < 1) {
      return "未知";
    }

    // 定义映射规则
    const nameMap = {
      1: "bar",
      2: "audi",
      3: "bmw",
      4: "mercedes"
      // 按需扩展更多映射
    };

    // 匹配到就返回名称，没匹配到就返回原数值（或者你自定义的默认文本）
    return nameMap[barValue] || barValue;
  };
});

然后在HTML里直接通过过滤器转换展示，原数值x.bar完全不受影响：

<thead>
  <tr>
    <th>Foo</th>
  </tr>
</thead>
<tbody>
  <tr ng-repeat= "x in names">
    <td>{{ x.bar | barNameFilter }}</td>
    <!-- 原数值依然可以正常使用 -->
    <td ng-if="x.bar === 1">仅bar显示的操作按钮</td>
  </tr>
</tbody>

两种方式都能满足你的需求，你可以根据实际场景选择：如果只是单个页面用，控制器预处理更简单；如果需要多处复用，过滤器是更好的选择~

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