从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)}}

请参阅下面的工作示例

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, ' '));
  };
});

<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>

第3个选项(过滤器) - 推荐

像Pankaj Parkar提到的那样,你也可以创建一个过滤器:

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, ' '));
  }
});

<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>

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

更多,第四选项(指令) - 推荐

您可以使用指令:

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, ' '));
      });
    }
  }
});

<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>

第五选项(CSS)

像Utopic提到的那样,你也可以使用white-space: pre;.这将像<pre>标记一样工作:

<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>

选择是你的:-)