从Angular中的变量值中删除多个空格

Question

我已使用ng-modal="message"绑定了我的输入框，并使用"message"在HTML上的其他位置显示此{{message}}。

问题是{{message}}删除在文本框中输入的所有多个空格。

请找到代码https://jsfiddle.net/steinbring/kbwMY/

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
  <input type="text" ng-model="message" />
  <input type="range" min="1" max="100" ng-model="size" />
  <hr>
  <div style="font-size:{{size}}em;">{{message}}</div>
</div>

任何解决方案？

Answer 1

第一个选项（HTML标记）

将{{message}}包裹在pre标记中

<pre>{{message}}</pre>

第二个选项（范围功能）

使用范围方法将空格替换为 ：

$scope.cleanup = function(message) {
    return message.replace(/\s/g, ' ');
};

现在在HTML中使用：

{{cleanup(message)}}

请参阅下面的工作示例

＆＃13;

＆＃13;

angular.module("sa", []).controller("foo", function($scope, $sce) {
  
  $scope.cleanup = function(message) {
    message = message || '';
    
    // Need to trust as HTML to allow   as HTML entity
    return $sce.trustAsHtml(message.replace(/\s/g, ' '));
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sa" ng-controller="foo">
  <input type="text" ng-model="message" />
  <input type="range" min="1" max="100" ng-model="size" />
  <hr>

  <!-- Need to now always use "ng-bind-html" -->
  <div style="font-size:{{size}}em;" ng-bind-html="cleanup(message)"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

第3个选项（过滤器） - 推荐

与提到的Pankaj Parkar一样，您也可以创建过滤器：

＆＃13;

＆＃13;

angular.module("sa", []).filter("allowWhiteSpace", function($sce) {
  
  return function(message) {
    message = message || '';
    
    // Need to trust as HTML to allow   as HTML entity
    return $sce.trustAsHtml(message.replace(/\s/g, ' '));
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sa">
  <input type="text" ng-model="message" />
  <input type="range" min="1" max="100" ng-model="size" />
  <hr>

  <!-- Need to now always use "ng-bind-html" -->
  <div style="font-size:{{size}}em;" ng-bind-html="message | allowWhiteSpace"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

https://docs.angularjs.org/api/ng/service/ $ SCE

更多，第四选项（指令） - 推荐

您可以使用指令：

＆＃13;

＆＃13;

angular.module("sa", []).directive("allowWhiteSpace", function($sce) {

  return {
    scope: {
      value: '=allowWhiteSpace'
    },
    link: function($scope, element) {
      $scope.$watch('value', function(message) {
        message = message || '';

        return element.html(message.replace(/\s/g, ' '));
      });
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sa">
  <input type="text" ng-model="message" />
  <input type="range" min="1" max="100" ng-model="size" />
  <hr>

  <div style="font-size:{{size}}em;" allow-white-space="message"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

第五选项（CSS）

与提到的Utopic一样，您也可以使用white-space: pre;。这将像<pre>标记一样工作：

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
    <input type="text" ng-model="message" />
    <input type="range"  min="1" max="100" ng-model="size" />
    <hr>
    <div style="font-size:{{size}}em; white-space: pre;">{{message}}</div>
</div>

＆＃13;

＆＃13;

＆＃13;

选择是你的： - ）