javascript - Ng-model not updating after resetting textarea in AngularJS - Stack Overflow

admin管理员组

文章数量:1324231

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.

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.

• javascript
• angularjs

Share Follow edited Feb 5, 2015 at 21:21 Michelangelo asked Feb 5, 2015 at 20:28 MichelangeloMichelangelo 5,95855 gold badges3535 silver badges5151 bronze badges 21

• ngmodel has nothing to do with setting document.getElementById('textarea').value = "" Just bind ng-click on that button and reset ng-model bound property – PSL Commented Feb 5, 2015 at 20:29
• 2 If you are updating outside of angular, you have to do a $scope.$apply() – Scottie Commented Feb 5, 2015 at 20:36
• @PSL There is a ng-click bound to the button that calls a function to reset the textarea. – Michelangelo Commented Feb 5, 2015 at 20:44
• There is no $apply needed in this case. Triggering the input event on the textarea is enough, since ng-model listens for that and will start the digest loop internally: jsfiddle/g5s6kv28 – tasseKATT Commented Feb 5, 2015 at 20:45
• why would you do apply here. If you have ng-click then clear the model from there. – PSL Commented Feb 5, 2015 at 20:45

 |  Show 16 more ments

3 Answers 3

Sorted by: Reset to default 3

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

http://jsfiddle/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/h4za5ta5/

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

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./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>

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 bee <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: '' };
    };
}]);

本文标签： javascriptNgmodel not updating after resetting textarea in AngularJSStack Overflow