1

I have a page with a select menu. I want to store that choice before moving to the search page. I can put the value in the search input, but it does not seem to be read by the angular search/filter. If I backspace once... or change the value in any way, it kicks in.

How can I shove a value in there have angular read it as if I had typed it in? Not sure of the right words to use. Thanks. There is more code, but I think that this will be enough to see what my issue is. Let me know if that is not the case.. Thanks.

http://codepen.io/sheriffderek/pen/dtAIy/

Here is a codepen. It's not really the same because it is sandboxed into one page, and also the local storage is effected. BUT. If my question is at all clear, it should be enough code.

Man makes angular filtered search. Man takes string. Man puts sting into the search input. Search does not reflect change.

select html

<select name='state' id='state_select'>
    <option value='state-name' data-state='California'>California</option>
    <option value='state-name' data-state='Arizona'>Arizona</option>
    <option value='state-name' data-state='New York'>New York</option>
    <option value='state-name' data-state='Utah'>Utah</option>
</select>


css (irrelevant)

/* n/a */


action js

var getTheState = function(input) {
    var theState = $(input).data('state');
    localStorage.setItem('state', theState);
    console.log(theState);
};

$('#state_select').on('change', function() {
    if (this.selectedIndex!==0) {
        var destinationPage = "search.html";
        getTheState('option:selected');
        document.location.href = destinationPage;
    }
});


the gist of the angular

<input type="search" data-ng-model="listingFilter" />

<ul class='things-list' data-ng-controller='DetailedNameOfController as listOf'>

    <li class='thing' data-ng-repeat='thing in listOf.things | search:listingFilter'>
        {{ thing.name | filter: name }}
    </li>

</ul>

sheriffderek
  • 8,848
  • 6
  • 43
  • 70
  • Can you create a plunker? Also, is there a good reason why you use jQuery's `.on('change')` and not `ng-change`? You would save yourself a lot of headache if you did not mix jQuery with Angular (unless you're building a directive) – New Dev Oct 22 '14 at 20:30
  • I didn't make a demo because of the need to change pages... but I think I could make one without that. As far as ng-change --- I was just mocking up some ideas and I have so far, only used angular for target little apps. BUT - that is a start! – sheriffderek Oct 22 '14 at 21:03
  • There is no angular on the first page. Only the second page. (RE:jQuery) – sheriffderek Oct 22 '14 at 22:40
  • 1
    Here's a reduced [plunker](http://plnkr.co/edit/tmxd59ibyeHtrzrkMvli?p=preview) with your issue. Clearly updating with `$(elem).val("something")` goes under the radar of Angular, so it doesn't have a chance to update the model. That's what I meant by "headaches". – New Dev Oct 23 '14 at 01:42
  • Just the one instance of data-binding was enough to see if angular was 'working'. – sheriffderek Oct 23 '14 at 13:56

1 Answers1

3

When you call $("input").val("something") sets the input value, but Angular doesn't see it. When you backspace (or type anything), Angular catches that and updates the model specifed with ng-model on the <input>.

From the following answers on SO:

Angular listens for input event, by default, or for a combination of keydown + change events. This doesn't happen with you set .val(), so you need to hack the event in:

$('input').val("some value").trigger("input");

Here's the plunker.

BUT, this is a hack, and NOT a recommended approach.

Community
  • 1
  • 1
New Dev
  • 48,427
  • 12
  • 87
  • 129
  • Thanks for the rundown @NewDev - I'm just starting to use angular for more interaction and not just a simple loop here or there. I'm going to start looking more into "the angular way." What would *your approach be? – sheriffderek Oct 23 '14 at 13:52
  • My approach would be not to mix jQuery with Angular. For a more comprehensive answer: [How do I “think in AngularJS” if I have a jQuery background?](http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background) – New Dev Oct 23 '14 at 18:30