Issues clearing HTML input with angular ng-click

77 views Asked by At

I'm wondering why I can't seem to clear a textbox input using ng-click. Here is a plunker example that I was able to get working, but I am experiencing different results in my actual application. In my app, the alert fires but the actual text does not clear. Any ideas as to what might be affecting this? Would having passing additional dependencies ($rootScope and playerService) cause any issues in my app?

I can provide more code if it will be helpful.

.controller('HomeTabCtrl', function ($scope, $rootScope, playerService) {

$scope.yellText = "";
$scope.vote = playerService.voteForPlayer;

$scope.postToSlack = playerService.postToSlack;
$scope.postYellToSlack = playerService.postYellToSlack;
$scope.clearYellText = function() {
  $scope.yellText = "";
  alert("cleared");
}

})


<div class="list list-inset">
    <label class="item item-input">
        <input type="text" placeholder="Type Some Words!" ng-model="yellText" autocomplete="off">
    </label>
</div>
<button class="button button-full button-positive" ng-click="postYellToSlack(selectedPlayer, yellText); clearYellText();">
    Enter text to earn points
</button>

Thank you very much for your time. Let me know if I'm being unclear or if you need any additional information from me.

2

There are 2 answers

0
user95227 On BEST ANSWER

turns out what I really needed was:

this.yellText = "";

instead of:

$scope.yellText = "";
1
Jan Kuri On

Use $setViewValue on ngModel as described here https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

so, in your case

$scope.yellText.$setViewValue('');

see: https://jsfiddle.net/totLccob/8/