Question

我正在制作一个小应用程序来学习Angular，并为文本处理制作了自定义过滤器。一切都运行正常，除了在我的输出文本有多个空格的情况下，这些会自动缩小到一个空间，这是我不想要的。问题不在于我定义的功能，因为我记录了输出，这没有问题。

HTML：

<textarea name="textarea" rows="10" cols="50" ng-model="encodeText" placeholder="Type or paste in a message to encode." ></textarea>
<p>Filtered input: {{ encodeText | encode }}</p>

JS：

(function(){
  var app = angular.module('myApp', []);
  app.filter("encode", function() {
    return function(input) {
      if (input) {
        //text processing
        console.log(output);
        return output;
      }
    };
 });

这是摩尔斯电码。所以控制台日志输出是：

.- -... -.-.   -.. . ..-.

有两个空格。在页面上我看到：

Filtered input: .- -... -.-. -.. . ..-.

我从谷歌搜索中看到的唯一建议是使用ng-trim =＆＃34; false＆＃34;在textarea上，没有任何影响。看起来修剪正在过滤器本身内发生。造成这种情况的原因是什么以及如何禁用它？ Code repo

Answer 1

默认情况下，HTML不会保留多个空格（将它们折叠为1个空格）。将样式添加到<p>标记preserve whitespace ...

<p style="white-space: pre">Filtered input: {{ encodeText | encode }}</p>

Answer 2

输出的p格式。尝试：

<pre>{ encodeText | encode }</pre>

为什么这个Angular JS过滤器会删除空格？

2 个答案: