3

입력을 페이지의 다른 부분에 바인딩하고 사용자가 입력 한 모든 공백을 예를 들어 별표와 같은 다른 문자로 대체하려고합니다.angular.js가 바인딩의 후행 공백을 받아들이게하려면 어떻게해야합니까?

내 (간체) HTML 코드는 다음과 같습니다

<div ng-app> 
    <div ng-controller="MyCtrl"> 
     Output: "{{input}}"<br /> 
     <input type="text" ng-model="rawInput" ng-change="onInputChanged()" /> 
    </div> 
</div> 

관련 컨트롤러는 매우 간단합니다, 너무 :

var myApp = angular.module('myApp',[]); 
function MyCtrl($scope) { 
    $scope.input = ''; 
    $scope.rawInput = ''; 
    $scope.onInputChanged = function() { 
     $scope.input= $scope.rawInput .replace(/\s/g, '*'); 
    }; 
}; 

이 결과는 예상과. 텍스트 상자에 'Hello '을 입력하면 결과 출력은 "Hello"이고 후행 공백은 제거됩니다. 입력 끝 부분에있는 여러 개의 공백에도 동일하게 적용됩니다.

'Hello W'과 같이 공백이 아닌 문자를 입력하면 공백이 올바르게 대체되어 표시됩니다 ("Hello*World").

여기 내 질문이 있습니다. 사용자가 입력 한 공백을 모두 보존하는 텍스트 상자의 값에 어떻게 바인딩 할 수 있습니까?

문제를 설명하는 JSFiddle을 만들었습니다.

답변

7

입력시 ng-trim="false"을 입력하십시오. 자동 입력을 손질하지 않습니다 잘못된 각도로 설정하면 angular documentation

에서

.