Manually triggering change event on input field with AngularJS

Question

I'm playing around with Angular JS and have a small blog feed where I have an input field with which to filter the displayed contents. Now, I've built my own "buzz cloud" (or whatever the word is), and am trying to implement it so that when one of the words are clicked, the updating of the input field will make the list filter correctly.

But, when I set the value of my input field, the change event on it is not triggered. So I try triggering it manually with jQuery - still doesn't work.

Code below:

<aside>
<div class="filters">
  Search: <input id="searchField" ng-model="query">
</div>
<div class="buzz">
    <h3>Buzz</h3>
    <li ng-repeat="(key, value) in buzz" class="thumbnail">  
        <a href="" style="font-size:{{value*10}}px" onclick="$('#searchField').val('{{key}}'); $('#searchField').trigger('change'); ">{{key}}</a>
    </li>
</div>
</aside>

score 1 · Answer 1 · edited May 23 '17 at 11:56

1

You should not use jQuery to manipulate the DOM like that when using AngularJS. Instead, modify the scope variable from within an AngularJS-based click handler to affect the change.

One tricky case in this instance is that you're setting a primitive value on the scope from inside an ngRepeat, which can have unexpected results due to the way JavaScript does prototypal inheritance. See this Stack Overflow answer for more details, but to fix in in this example, we'll create an object on which to attach the query value:

<aside>
<div class="filters">
  Search: <input id="searchField" ng-model="data.query">
</div>
<div class="buzz">
    <h3>Buzz</h3>
    <li ng-repeat="(key, value) in buzz" class="thumbnail">  
        <a href="" style="font-size:{{value*10}}px" ng-click="data.query = key">{{key}}</a>
    </li>
</div>
</aside>

edited May 23 '17 at 11:56

Community

1
1

answered Aug 03 '13 at 20:10

Michelle Tilley

157,729
40
374
311

Sorry for not noticing this response earlier - the addition of "data." doesn't help as I'm defining the "query" in a services JSON call, and there I'm not allowed to use the same prefix, right? – joakimnorberg Aug 10 '13 at 16:29
When you bind the service response to the `$scope`, you can assign it to whatever you want. `data` here can be anything. – Michelle Tilley Aug 10 '13 at 19:34

L105 · Answer 2 · 2013-08-10T18:52:00.357

1

You should never use jQuery with angular exept for some directives. There's always a better way to do it. Don't forget to use ng-style if you are using scope values because IE won't change anything if {{value}} is changed.

<aside>
    <div class="filters">
      Search: <input id="searchField" ng-model="query">
    </div>
    <div class="buzz">
        <h3>Buzz</h3>
        <li ng-repeat="(key, value) in buzz" class="thumbnail">  
            <a href="#" ng-style="'font-size': value*10 + 'px'" ng-click="query = key">{{key}}</a>
        </li>
    </div>
    </aside>

EDIT

Ok, now I found what is wrong in the expression. When we are calling query in ng-repeat, it create a new scope so we need to assign the new value to the parent scope. You also forgot tu put an <ul> to wrap <li>s.

I created a Plunker to demonstrate it.

<aside>
<div class="filters">
  Search: <input id="searchField" ng-model="query">
</div>
<div class="buzz" ng-init="buzz = {'size': 2, 'size2': 4}">
    <h3>Buzz</h3>
    <ul>
    <li ng-repeat="(key, value) in buzz" class="thumbnail">   
        <a href="#" ng-style="{'font-size': value*10 + 'px'}" ng-click="$parent.query = key">{{key}}</a> <!-- EDIT need to add $parent to query -->
    </li>
    </ul>
</div>

edited Aug 10 '13 at 18:52

answered Aug 03 '13 at 20:15

L105

5,379
3
18
23

This, for some reason, does not work. The page is reloaded but no effect. Also, the styling attribute is no longer working. Any clues as to what might be wrong? – joakimnorberg Aug 08 '13 at 18:23
Still no effect - search field is not updated, and style properties aren't working. Says... Syntax Error: Token ':' is an unexpected token at column 10 of the expression [font-size: value*10 + 'px'] starting at [: value*10 + 'px']. – joakimnorberg Aug 10 '13 at 12:46
It is because of the '-' of font-size, need to transfer it as a string. Updated my post. – L105 Aug 10 '13 at 13:32
Well, styling works now (after I also put curlies around the style statement), but the search field is still not updated. – joakimnorberg Aug 10 '13 at 16:15
Check my Plunker, I found the problem. – L105 Aug 10 '13 at 18:54
Thanks, but still - no luck! Same behavior as before. – joakimnorberg Aug 10 '13 at 21:41
Bu have you check the plunker?? – L105 Aug 11 '13 at 02:53
I did, and I also added your ng-init on the outer div... but still doesn't work. Could it have something to do with my "query" being instantiated in my JSON service call? – joakimnorberg Aug 11 '13 at 18:56
As soon as your buzz is being populated, your ng-reapeat will trigger. I just called ng-init to populate buzz. Can you post what your post array/object looks like? – L105 Aug 11 '13 at 19:31

score 0 · Answer 3 · answered Aug 03 '13 at 20:09

You should set the ng-model of the input using ng-click:

<a href="" style="font-size:{{value*10}}px" ng-click="query=key">{{key}}</a>

In your example you were using jQuery which is outside the angularjs world, so it would not trigger a new computation of the model when you change it.

Manually triggering change event on input field with AngularJS

3 Answers3