Удалите несколько пробелов из переменных значений в 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>

---

третий вариант (фильтр) - Рекомендуемый

Как Pankaj Parkar МЕНТ ioned, вы можете создать фильтр, а также:

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

Еще больше, четвёртую Option (директива) - Рекомендуемая

Вы можете сделать использование Директива:

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>

Выбор за вами :-)