Angular – Numeric Control Directive

July 3, 2014

in one of LogoUi’s projects we had a requirement for  a numeric input type.
My first thought was using an HTML5 input type number .

Example:

<input type="number"  min="1" max="5">

The problem was that not all browsers has support for HTML5 input types.
Check this site for more information about HTML5 forms browser support .

so as a solution I decided to do 2 things:

A) Use jQuery Spinner (numeric) widget which solves my cross browser compatibility issue.
B) Wrap the widget as an Angular directive.

Final Result:

http://embed.plnkr.co/o33VP56azuA22FLjpU3p/preview

You can find my source code and more examples regarding Numeric directive in my GitHub page.

Enjoy!

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

2 comments

  1. Unseen RevolutionJanuary 13, 2015 ב 8:37

    Alex,This is exactly what I was looking for. I had worked out the directive, but could not get the cross browser compatibility solved. Spinner is a great answer. Cheers!

    Reply
  2. cnd5041February 6, 2015 ב 17:43

    I’m having a little trouble implementing this.

    I’m getting an ‘undefined is not a function’ error on this line:
    if (element.is(“input”)) {

    Any suggestions on that? I have both jQuery and jQuery UI in the project.

    Reply