How to pass a scope variable to a native input min attribute in angular?

Question

So I'm working with Angular 1.5. I'm trying to accomplish something quite trivial. Apologies if this sounds a bit off as backend is more my fortè. What I'm trying to do is pass a scope variable to an input attribute. Is this a known issue?

angular.module('CompDirective',
    ['ngMaterial']
).directive('pitchButton', function(){
    return {
        restrict: 'E',
        scope: {
            campaign: '='
        },
        templateUrl: '/static/html/compensation.html',
        link: function(scope, element, attrs){
            scope.minCompensation = 100;
        }
)

and in my html.

<input
    type="number"
    ng-model='fields.monetary_compensation'
    name="compensation" required
    ng-pattern='/^[1-9]+[0-9]*$/'
    placeholder="Compensation"
    min="minCompensation"
></input>

Echoing out minCompensation works as expected but the param min with minCompensation is not validating which leads me to believe that there is an issue with the input directive's min param being able to recognize scope variables.

Community · Accepted Answer · 2017-05-23 12:07:14Z

2

min is not in the documentation, so I'm guessing it doesn't accept an angular expression.

You need to interpolate the value as in <input ... min="{{minCompensation}}" />

Alternatively, you can create your own ng-min and ng-max directives.

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Nov 16, 2016 at 19:34

adam0101

31.5k22 gold badges102 silver badges193 bronze badges

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

2 Comments

Dap Over a year ago

odd. Why would it then work with a hardcoded value? Anyway, I'll accept this but also post my own solution

adam0101 Over a year ago

Because min is an HTML5 attribute, not an Angular directive. In the solution you posted, you're using an Angular directive to dynamically set the HTML5 attribute - which is a better way to do it.

Dap · Accepted Answer · 2016-11-16 21:58:10Z

0

The scope value needs to be interpolated/evaluated. So the ng-attr attribute will evaluate and bind the appropriate value in addition to bracketting the variable.

Code

<input
    type="number"
    ng-model='fields.monetary_compensation'
    name="compensation" 
    placeholder="Compensation"
    ng-attr-min="{{minCompensation}}"
></input>

answered Nov 16, 2016 at 21:58

Dap

2,3595 gold badges33 silver badges45 bronze badges

Collectives™ on Stack Overflow

How to pass a scope variable to a native input min attribute in angular?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related