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

Question

我已将我的输入框与 ng-modal="message" 绑定(bind)，并使用 {{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>

<小时/>

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

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

选择是你的:-)