Working Example

Question

考虑以下HTML片段：

<div class="text-center">
    <h3>LAeq: <span class="monospace"><strong>{{ Laeq | paddednumber : 7 : 2 }}</strong></span> dB</h3>
</div>

paddednumber 是添加前导空格的过滤器：

    myFilters.filter('paddednumber', function () {
    return function (value, width, decimals) {
        if (value === undefined) return;
        var result = value.toFixed(decimals);
        while (result.length < width) {
            result = ' ' + result;
        };
        return result;
    };
});

如何防止Angular修剪过滤器添加的前导空格？我找到 textarea 和输入指令的 ng-trim 选项，但上面示例中的 Laeq 是绑定到$资源，需要进行过滤以使格式正确。我当然可以在控制器中进行格式化，然后在 textarea 上使用 ng-model 来绑定范围中的格式化值，但我希望更简单我的HTML代码中的解决方案。

Answer 1

Angular不是它正在削减领先空间的那个，它是你的浏览器负责人。例如，请考虑 this example ：

<div>
    Hello <span>               
                                Han</span>
</div>

这是纯HTML（没有Angular），正如您在浏览器呈现此标记时所看到的，浏览器会忽略所有空白，回车以及在文本的下一个标记或博客之前出现的标签。这是所有浏览器的标准行为。

例如，如果右键单击同一页面并选择“查看页面源”选项，您将看到有大量空格，制表符和回车符被忽略。你可能会发现这样的事情：

                        <a href="/review" title="Review queues - help improve the site">
                            review
                        </a>

您是否看到浏览器忽略了所有字符？

这就是为什么当你想特别对浏览器说：“嘿，这是一个我希望你渲染的空白区域”你可以使用这个符号： ，这是你想要用的像这样的东西。

但是，如果您希望自定义过滤器呈现该符号（ ），则需要使用其unicode equivalent，在这种情况下为\u00A0。

这就是我更改过滤器的原因，如下所示：

.filter('paddednumber', function () {
    return function (value, width, decimals) {
        if (value === undefined) return;
        var result = value.toFixed(decimals);
        var spacesToAdd = width-result.length;
        for(var i=0;i<spacesToAdd;i++)
            result = '\u00A0' + result;        
        return result;
    };
});

如何防止修改Angular中的绑定值

1 个答案:

Working Example