在小数点对齐数字 angular ui 网格

Question

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

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

有没有人有过这样的运气。

Answer 1

我认为最好的方法是 select 所有带有 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 右对齐，.float 左对齐 css:

.int, .float{
    display: inline-block;
    width: 100px;
}
.int{
    text-align: right;
}
.float{
    text-align: left;
}

这样 selection 就可以了，div 和 span 不会影响您的 html5 代码的含义。此外，您不依赖于固定宽度的字体。

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

Answer 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;
}

结果：

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

在小数点对齐数字 angular ui 网格

Aligning numbers at decimal point angular ui grid

html

javascript

css

angularjs

angular-ui-grid