Directive angularjs only input number in a range 1 to 10, jquery to directive angularjs

Question

I am new in the world of angularjs, I need to enter only numbers from 1 to 10 in an input of type number. without using the min and max properties of HTML5

I found an example in Jquery, could you please help me to convert it into an angularjs directive, with its respective parameters that is:

<input type = "number" directive-range = "1,10">

The example I found in Jquery is the following. the example in jquery works without the min and max properties of html5 and is what I need:

<input type = "number" value = "1" min = "1" max = "10">
<p style = "display: none"> Accepting Only values 1-10 </ p>

var t = false

$ ('input'). focus (function () {
    var $ this = $ (this)
    
    t = setInterval (

    function () {
        if (($ this.val () <1 || $ this.val ()> 10) && $ this.val (). length! = 0) {
            if ($ this.val () <1) {
                $ this.val (1)
            }

            if ($ this.val ()> 10) {
                $ this.val (10)
            }
            $ ('p'). fadeIn (1000, function () {
                $ (this) .fadeOut (500)
            })
        }
    }, fifty)
})

$ ('input'). blur (function () {
    if (t! = false) {
        window.clearInterval (t)
        t = false;
    }
})

Example Jquery

I hope you can help me I do not understand much about angularjs directives

If I understand correctly, the problem is that the directive only inputs numbers from 1 to 10 right? have you tried changing the directive-limit or the min and max values? — William Perron
– William Perron, Commented Jan 5, 2018 at 16:06
I want to convert the jquery example to an angularjs directive. parameterized for the use of limits. without using the min and max properties of HTML5 — xlancelotx
– xlancelotx, Commented Jan 5, 2018 at 16:12

lealceldeiro · Accepted Answer · 2018-01-05 15:55:29Z

1

You can use the native HTML5 properties for input of type number: min and max.

Behind scenes AngularJS will use the min-length and max-length directives.

As long as you can use these, I strongly recommend you to do so instead of creating a new directive.

answered Jan 5, 2018 at 15:55

lealceldeiro

15.1k7 gold badges54 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

xlancelotx Over a year ago

thank you for your answer but in my case I should not use the min and max properties of HTML5

Sudi065 · Accepted Answer · 2018-01-05 19:10:13Z

1

It is confusing whether you need a Angular Directive which accepts only Numbers!! If yes, please see code below which accepts only Numbers in a TextBox.

ngControlMod.directive('numbersOnly', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attr, ngModelCtrl) {
            function fromUser(text) {
                if (text) {
                    var transformedInput = text.replace(/[^0-9-]/g, '');
                    if (transformedInput !== text) {
                        ngModelCtrl.$setViewValue(transformedInput);
                        ngModelCtrl.$render();
                    }
                    return transformedInput;
                }
                return undefined;
            }
            ngModelCtrl.$parsers.push(fromUser);
        }
    };
});

and in your HTML5 code,

<input type="text" numbers-only name="Count" />

You can also look here the working code jsfiddle click here

answered Jan 5, 2018 at 19:10

Sudi065

4676 silver badges11 bronze badges

2 Comments

xlancelotx Over a year ago

if I need to only accept number in a range, in my case from 1 to 10. In case you enter a number less than 0 or greater than 10, you should behave like the example of jquery my input has to be type number since I need to use the pick

MalcolmOcean Over a year ago

Brilliant. I added this so that you couldn't put minuses in the middle, eg 1-4 : .replace(/(.+)-/, '$1')

Collectives™ on Stack Overflow

Directive angularjs only input number in a range 1 to 10, jquery to directive angularjs

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related