2015-10-12 2 views
-1

У меня есть некоторые проблемы с ng-моделью и элементом ввода. Пожалуйста, взгляните на этот плункер: http://plnkr.co/edit/PJCv1AsPns1cxuSPTZiUУгловое триммерное входное значение

Моя точка зрения заключается в том, что я редактирую входное значение и добавляю некоторые белые пробелы в начале и в конце f.e.

some text  

и нажмите save белые пробелы обрезаются (и это нормально) от inputValue, но если я изменить его снова «предыдущие» белые пространства появляются на входе. Как предотвратить это? Я пытался сделать это с помощью

angular.element($('#trimInput')).val($scope.inputValue); 

и он работает, но мне не нравится это решение.

angular.module('app', []) 
 
    .controller('trim', ['$scope', function($scope) { 
 
    
 
    $scope.inputValue = "some text"; 
 
    $scope.editMode = false; 
 
    
 
    $scope.edit = function() { 
 
     $scope.editMode = true; 
 
    }; 
 
    
 
    $scope.save = function() { 
 
     $scope.editMode = false; 
 
     //angular.element($('#trimInput')).val($scope.inputValue); 
 
     console.log($scope.inputValue); 
 
     console.log($scope.inputValue.length); 
 
    }; 
 
    
 
    }])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="app"> 
 
    <div ng-controller="trim"> 
 
    <div ng-show="!editMode"> 
 
     [{{inputValue}}] 
 
     <button ng-click="edit()">edit</button> 
 
    </div> 
 
    <div ng-show="editMode"> 
 
     <input id="trimInput" type="text" ng-model="inputValue" /> 
 
     <button ng-click="save()">save</button> 
 
    </div> 
 
    </div> 
 
</body>

+0

downvoted, потому что вы избегаете правила, добавив ссылку plunkr и никакого кода – sirrocco

+0

зафиксировать значение модели, а не значение элемента дом – charlietfl

+0

, но модель не имеет пробелов, они отображаются только во входном элементе – user3452568

ответ

0

По умолчанию ng-trim является true в угловой поэтому он будет автоматически обрезать значение в области. Но значение не будет обновляться на input, так как дополнительный вход будет там. Вы должны вручную назначить его.

$document[0].getElementById("trimInput").value = $scope.inputValue; 

Для этого нужно вводить $document в приложении. Это автоматически присваивает значение трима для ввода при сохранении.

See DEMO

Смежные вопросы