Using jquery in Ionic/Angular


#1

I’m relatively new to both Ionic and Angular. I’m wondering if it’s okay or ‘best practice’ to use jquery along with the Ionic/Angular stack.

I realize that Angular takes care of most of the template/dom manipulations needed but I’m finding it difficult to do other types of manipulations… a good example is that I wanted to create an input mask on a text box… I wanted it to only accept numbers, and format currency… so the text box starts off at $0.00 and as you type in numbers the numbers would fill in appropriately… ex:

inputting 5-3-2-1-5-0 would give you

  1. $0.05
  2. $0.53
  3. $5.32
  4. $53.21
  5. $532.15
  6. $5,321.50

respectively.

I decided to write a jquery event handler ( $(document).on(‘keydown’) ) to handle the input but as I did this Angular wouldn’t bind the ng-model variable I placed on the input tag to the function called on in the controller when submitting.

If anyone has any tips, suggestions, or best practices that would be great.

Thanks
-Dan


#2
$(document).on('keydown', function(){
  //This is your event handler, wrap it in $apply
  $apply(function(){
     //Do all your logic here, apply will process it like normal data modification for angular
  });
});

Hope this helps :slight_smile: I’m not sure how you would do this with pure angular. Anyways, jquery is not seen as “best practice” to use with angular, since it is very often unnecessary. I haven’t seen anyone really objecting against it though.


#3

You can use Angular’s native ng-keydown (https://docs.angularjs.org/api/ng/directive/ngKeydown)

You can also write a directive that will observe and fire on keydown.

And as @iwantwin said: using jQuery in an Angular app is not considered a “best practice”


#4

Thanks for the suggestions. I’ll take a look at ng-keydown. I’m also have another example I’m not sure how to proceed with Angular’s templating engine…

I want another textfield to have an autoguess column appear below it. So as soon as you start typing characters into this input box, it would search against an array of guesses and generate a list (ul li) below the input box for the user to select. If selected the textbox would appear with the guess and then the ul list would be removed or hidden from the DOM.

This seems pretty straight-forward with jquery but I’m unsure where to begin in a pure angular environment. I’ve used angular successfully with normal templating requests (variable insertion, ng-if, ng-repeat) but this is a bit different.

Thanks!


#5

On ng-keydown initiate a function of your controller. In the controller, fill an array with “guesses”. Then, on your suggestion-list you create an ng-if to check if your suggestion array length is larger then 0. You could inside your suggestions ng-if just use ng-repeat to show all your suggestions :slight_smile:

Since your textfiel has an ng-model on it, you could access the value of that in your controller and base your suggestions on that. ng-focus and ng-blur will help you to show and hide the suggestions when the textfield is focussed or unfocussed :smile:


#6

I like what @iwantwin suggested. But if you prefer something that feels more like a jquery plugin I can recommend this: