在小数点角度 ui 网格处对齐数字

Posted 2023-03-06

【中文标题】在小数点角度 ui 网格处对齐数字

【英文标题】：Aligning numbers at decimal point angular ui grid

【发布时间】：2015-07-03 08:58:58

【问题描述】：

我正在查看在 Angular UI Grid 中对齐小数点上的数字，如下所示。

    11.293
      .89
233424
      .34345

我有一些想法，包括具有三个对齐 div 和使用透明 0 的单元格模板。

有没有人有这方面的运气。

【问题讨论】：

我之前没有看到有人尝试过这个。您可以尝试使用迄今为止尝试过的示例来更新您的问题以获得更具体的帮助，这听起来对于一些自定义指令来说可能是一项不错的任务。如果您将其传递给它，它可以根据需要将其分解为 div

【参考方案1】：

我认为最好的方法是使用 javascript 选择所有数字，然后将它们分解并将它们封装在 2 个 span 元素中，如下所示：

<div>
    <span class="int">11.</span><span class="float">293</span>
</div>
<div>
    <span class="int">233424.</span><span class="float">89</span>
</div>

然后您可以将 with 分配给元素并将 .int 与 css 对齐，将 .float 与 css 对齐：

.int, .float
    display: inline-block;
    width: 100px;

.int
    text-align: right;

.float
    text-align: left;

这样选择没问题，div 和 span 不会干扰 html5 代码的含义。此外，您不会依赖固定宽度的字体。

希望这可行，如果不行，请告诉我。

【参考方案2】：

在我的component.ts 文件中，我添加了一个方法 splitNumbers，它将每个数字转换为一个包含整数和小数部分的数组：

splitNumbers() 
  return this.numbers.map(number => 
    let str = number.toString();
    return str.split(".");
  );

在我的component.html 中，我将单独的<span> 元素添加到整数和小数部分。不要在标签之间使用空格，除非您想在输出中使用额外的空格：

<li *ngFor="let parts of splitNumbers()">
  <span class="integer"> parts[0] </span>.<span class="fractional"> parts[1] </span>
</li>

然后在the CSS我将整数部分设置为inline-block，给它一个宽度并使其右对齐：

.integer 
  text-align: right;
  width: 10em;
  display: inline-block;

结果：

如您所见，最后一个数字非常小，并且以科学记数法而不是展开式书写。所以这并不完美。