CODEWITHSUNDEEP
javascriptangularjs
Michelangelo
Michelangelo

Reputation: 5958

Ng-model not updating after resetting textarea in AngularJS

I have been scratching my head over this problem for a while now. I have made a textarea and created a model with ng-model. This works all fine. I also have a button that uses plain Javascript for resetting the textarea. The binding stops working at that moment I click this button and I still can see my text in the other field, but the textarea is emtpy. I have recreated the problem here Fiddle.

window.onload = function () {
document.getElementById('btn').onclick = function () {
    document.getElementById('textarea').value = ""; 
};
};

Am I missing something here or is this not how binding works in Angular. When I start retyping it starts 'listening' again and displays the correct text.

Does somebody have a clue or encountered this problem before?

Thanks in advance.

Upvotes: 1

Views: 12172

Answers (3)

user2892372
user2892372

Reputation: 1

Angular doesn't like string variables for ng-model and doesn't seem to update them in my experience. I change my variable to an object with a string property and then initialize the object in the controller.

<textarea id="textarea" ng-model="txt"> would become <textarea id="textarea" ng-model="xyz.text">

In the controller I initialize xyz.

app.controller('MainCtrl', ['$scope', function ($scope) {
    $scope.xyz = { text: '' };
    
    initialize();

    function initialize() {
        $scope.xyz = { text: '' };
    };
}]);

Upvotes: 0

Scottie
Scottie

Reputation: 11308

Here's a fiddle that will do what you are asking, but it's very un-angular.

http://jsfiddle.net/tk0a5nf1/3/

window.onload = function () {
    document.getElementById('btn').onclick = function () {
        var scope = angular.element(document.getElementById('textarea')).scope();
        scope.txt = "";
        scope.$apply();
    };
};

Here is a more angular way of doing this:

http://jsfiddle.net/h4za5ta5/

<div ng-app>
    <textarea id="textarea" ng-model="txt"></textarea>
    <div>{{txt}}</div>
    <button id='btn' ng-click='txt=""'>Reset textarea</button>
</div>

Upvotes: 3

AWolf
AWolf

Reputation: 8990

Not sure why you don't use angular to reset your text area.

You can do a reset with ng-click="txt=''" with-out a function in your controller but it's better to do it like this ng-click="reset()".

For a demo see below and here at jsFiddle.

var app = angular.module('myApp', []);

app.controller('MainCtrl', ['$scope', function ($scope) {
    $scope.txt='';
    
    $scope.reset = function() {
        $scope.txt = '';
    };
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular.js"></script>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<textarea id="textarea" ng-model="txt">
    
</textarea>

    <div>{{txt}}</div>

<!--<button id='btn' ng-click="txt=''">Reset textarea</button>-->
    <button id='btn' ng-click="reset()">Reset textarea</button>
</div>
  </div>

Upvotes: 2

Related Questions