admin管理员组文章数量:1323157
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.
Share edited Feb 5, 2015 at 21:21 Michelangelo asked Feb 5, 2015 at 20:28 MichelangeloMichelangelo 5,9585 gold badges35 silver badges51 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 theinput
event on the textarea is enough, sinceng-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
3 Answers
Reset to default 3Here'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
版权声明:本文标题:javascript - Ng-model not updating after resetting textarea in AngularJS - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742141078a2422581.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论