I am facing some issues with ng-model and input element. Can you please check out this plunker:
http://plnkr.co/edit/PJCv1AsPns1cxuSPTZiUMy concern is that when I make changes to the input value by adding extra white spaces at the beginning and end, for example:
some text
and then click on save, the white spaces get trimmed (which is fine) from inputValue. However, if I edit it again, the "previous" white spaces reappear in the input. How can I prevent this? I attempted to achieve this using
angular.element($('#trimInput')).val($scope.inputValue);
and while it works, I am not entirely satisfied with this solution.
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>