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>

Answer 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>

Answer 2

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>

Answer 3

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.