How to call a function when input is cleared in AngularJS?

Question

I know Angular has simple syntax to display messages or update css, but what I'm trying to do is actually call a function.

<input ng-model="somefield">
<span ng-show="!somefield.length">Please enter something!</span>
<span ng-show="somefield.length">Good boy!</span>

This is my model vm.tagSearching = '' I can detect when I start typing in the input and see the value update. However once I get to the last letter, and I delete that I don't get an update.

I tried using $scope.watch

$scope.$watch('vm.tagSearching', function() {
   alert('hey, var has changed!');
});

However this only fires once as the app initializes, but never again, even while typing.

Markup

<input class="tag-search-input"
       type="text"
       placeholder="Search Tags"
       ng-model="tgs.tagSearching"
       typeahead="t for t in tgs.fuzzyTagSearch($viewValue)">

Controller

function fuzzyTagSearch(word) {
    console.log('fuzzyTagSearch',word);
    if (word.length > 2) {
        ApiFactory.getSearchResults(word).then(function(data) {
            console.log('data',data.data.ticker_tags);
            vm.terms = data.data.ticker_tags;
        });
    }
}

How would you accomplish this? I need to detect when the input is clear when the user backspaces / deletes all the letters so that I can reset the table.

I actually found a work around, sorta kinda, but not really hacky word.length < 2 then I can call a function that way. However I'm still wondering if there is a better/more Angular way to accomplish clear input detection. — Leon Gaban
– Leon Gaban, Commented Feb 2, 2016 at 0:26

Phil · Accepted Answer · 2016-02-02 00:30:18Z

7

You can simply set up an ng-change directive.

<input ng-model="tgs.tagSearching" ng-change="tgs.detectEmpty()">

vm.detectEmpty = function() {
    if (vm.tagSearching.trim().length === 0) {
        // it's empty
    }
}

answered Feb 2, 2016 at 0:30

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to call a function when input is cleared in AngularJS?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related